<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.12. Scripting</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="interactive-elements.html#interactive-elements"><span class="secno">4.11</span> <span class="content">Interactive elements</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements"><span class="secno">4.13</span> <span class="content">Common idioms without dedicated elements</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="semantics-scripting.html#semantics-scripting"><span class="secno">4.12</span> <span class="content">Scripting</span></a>
       <ol class="toc">
        <li>
         <a href="semantics-scripting.html#the-script-element"><span class="secno">4.12.1</span> <span class="content">The <span><code>script</code></span> element</span></a>
         <ol class="toc">
          <li><a href="semantics-scripting.html#script-processing-model"><span class="secno">4.12.1.1</span> <span class="content">Processing model</span></a>
          </li><li><a href="semantics-scripting.html#scripting-languages"><span class="secno">4.12.1.2</span> <span class="content">Scripting languages</span></a>
          </li><li><a href="semantics-scripting.html#restrictions-for-contents-of-script-elements"><span class="secno">4.12.1.3</span> <span class="content"><span>Restrictions for contents of <code><span>script</span></code> elements</span></span></a>
          </li><li><a href="semantics-scripting.html#inline-documentation-for-external-scripts"><span class="secno">4.12.1.4</span> <span class="content"><span>Inline documentation for external scripts</span></span></a>
          </li><li><a href="semantics-scripting.html#interaction-of-script-elements-and-xslt"><span class="secno">4.12.1.5</span> <span class="content">Interaction of <code><span>script</span></code> elements and XSLT</span></a>
         </li></ol>
        </li><li><a href="semantics-scripting.html#the-noscript-element"><span class="secno">4.12.2</span> <span class="content">The <span><code>noscript</code></span> element</span></a>
        </li><li>
         <a href="semantics-scripting.html#the-template-element"><span class="secno">4.12.3</span> <span class="content">The <span><code>template</code></span> element</span></a>
         <ol class="toc">
          <li><a href="semantics-scripting.html#interaction-of-template-elements-with-xslt-and-xpath"><span class="secno">4.12.3.1</span> <span class="content">Interaction of <code><span>template</span></code> elements with XSLT and XPath</span></a>
         </li></ol>
        </li><li>
         <a href="semantics-scripting.html#the-canvas-element"><span class="secno">4.12.4</span> <span class="content">The <span><code>canvas</code></span> element</span></a>
         <ol class="toc">
          <li><a href="semantics-scripting.html#color-spaces-and-color-correction"><span class="secno">4.12.4.1</span> <span class="content">Color spaces and color correction</span></a>
          </li><li><a href="semantics-scripting.html#serializing-bitmaps-to-a-file"><span class="secno">4.12.4.2</span> <span class="content">Serializing bitmaps to a file</span></a>
          </li><li><a href="semantics-scripting.html#security-with-canvas-elements"><span class="secno">4.12.4.3</span> <span class="content">Security with <code><span>canvas</span></code> elements</span></a>
         </li></ol>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.12" id="semantics-scripting"><span class="secno">4.12. </span><span class="content">Scripting</span><a class="self-link" href="semantics-scripting.html#semantics-scripting"></a></h3>
     <p>Scripts allow authors to add interactivity to their documents.</p>
     <p>Authors are encouraged to use declarative alternatives to scripting where possible, as
  declarative mechanisms are often more maintainable, and many users disable scripting.</p>
     <div class="example" id="example-2391b785"><a class="self-link" href="semantics-scripting.html#example-2391b785"></a> For example, instead of using script to show or hide a section to show more details, the <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-16">details</a></code> element could be used. </div>
     <p>Authors are also encouraged to make their applications degrade gracefully in the absence of
  scripting support.</p>
     <div class="example" id="example-9ee1ebdb"><a class="self-link" href="semantics-scripting.html#example-9ee1ebdb"></a> For example, if an author provides a link in a table header to dynamically resort the table,
    the link could also be made to function without scripts by requesting the sorted table from the
    server. </div>
     <h4 class="heading settled" data-level="4.12.1" id="the-script-element"><span class="secno">4.12.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-script"><code>script</code></dfn> element</span><a class="self-link" href="semantics-scripting.html#the-script-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-107">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-12">Metadata content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-138">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-152">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-17">Script-supporting element</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-106">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-13">metadata content</a> is expected.
      </dd><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-153">phrasing content</a> is expected.
      </dd><dd>Where <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-18">script-supporting elements</a> are expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-109">Content model</a>:
      </dt><dd>If there is no <code>src</code> attribute, depends on the value of the <code>type</code> attribute, but must match <a data-link-type="dfn" href="semantics-scripting.html#script-content-restrictions" id="ref-for-script-content-restrictions-1">script content restrictions</a>.
      </dd><dd>If there <em>is</em> a <code>src</code> attribute, the element must be either empty or contain only <a data-link-type="dfn" href="semantics-scripting.html#script-documentation" id="ref-for-script-documentation-1">script documentation</a> that also matches <a data-link-type="dfn" href="semantics-scripting.html#script-content-restrictions" id="ref-for-script-content-restrictions-2">script
    content restrictions</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-106">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-108">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-107">Global attributes</a>
      </dd><dd><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-3">src</a></code> - Address of the resource
      </dd><dd><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-1">type</a></code> - Type of embedded resource
      </dd><dd><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-charset" id="ref-for-element-attrdef-script-charset-1">charset</a></code> - Character encoding of the external script resource
      </dd><dd><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-1">async</a></code> - Execute script <a data-link-type="dfn" href="infrastructure.html#in-parallel" id="ref-for-in-parallel-22">in parallel</a>
      </dd><dd><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-1">defer</a></code> - Defer script execution
      </dd><dd><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-crossorigin" id="ref-for-element-attrdef-script-crossorigin-1">crossorigin</a></code> - How the element handles crossorigin requests
      </dd><dd><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-nonce" id="ref-for-element-attrdef-script-nonce-1">nonce</a></code> - Cryptographic nonce used in <em>Content Security Policy</em> checks <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-129">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-106">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="interface" data-export="" id="htmlscriptelement-htmlscriptelement">HTMLScriptElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-106">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="semantics-scripting.html#dom-htmlscriptelement-src" id="ref-for-dom-htmlscriptelement-src-1">src</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="semantics-scripting.html#dom-htmlscriptelement-type" id="ref-for-dom-htmlscriptelement-type-1">type</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="semantics-scripting.html#dom-htmlscriptelement-charset" id="ref-for-dom-htmlscriptelement-charset-1">charset</a>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="semantics-scripting.html#dom-htmlscriptelement-async" id="ref-for-dom-htmlscriptelement-async-1">async</a>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="semantics-scripting.html#dom-htmlscriptelement-defer" id="ref-for-dom-htmlscriptelement-defer-1">defer</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span>? <a class="nv idl-code" data-link-type="attribute" data-type="DOMString?" href="semantics-scripting.html#dom-htmlscriptelement-crossorigin" id="ref-for-dom-htmlscriptelement-crossorigin-1">crossOrigin</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="semantics-scripting.html#dom-htmlscriptelement-text" id="ref-for-dom-htmlscriptelement-text-1">text</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="semantics-scripting.html#dom-htmlscriptelement-nonce" id="ref-for-dom-htmlscriptelement-nonce-1">nonce</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-22">script</a></code> element allows authors to include dynamic script and data blocks in
  their documents. The element does not <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-171">represent</a> content for the
  user.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="script" data-dfn-type="element-attr" data-export="" id="element-attrdef-script-type"><code>type</code></dfn> attribute allows customization of the
  type of script represented:</p>
     <ul>
      <li data-md="">
       <p>Omitting the attribute, or setting it to a <a data-link-type="dfn" href="semantics-scripting.html#javascript-mime-type" id="ref-for-javascript-mime-type-1">JavaScript MIME type</a>, means that the script is
 a <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-1">classic script</a>, to be interpreted according to the JavaScript <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#prod-Script">Script</a> top-level production. Classic scripts are affected by the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-charset" id="ref-for-element-attrdef-script-charset-2">charset</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-2">async</a></code>,
 and <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-2">defer</a></code> attributes. Authors should omit the attribute, instead of redundantly
 giving a <a data-link-type="dfn" href="semantics-scripting.html#javascript-mime-type" id="ref-for-javascript-mime-type-2">JavaScript MIME type</a>.</p>
      </li><li data-md="">
       <p>Setting the attribute to any other value means that the script is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="data block|data blocks" data-noexport="" id="data-block">data block</dfn>, which is not processed. None of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-23">script</a></code> attributes (except <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-2">type</a></code> itself) have any effect on <a data-link-type="dfn" href="semantics-scripting.html#data-block" id="ref-for-data-block-1">data blocks</a>.
 Authors must use a <a data-link-type="dfn" href="infrastructure.html#valid-mime-type" id="ref-for-valid-mime-type-10">valid MIME type</a> that is not a <a data-link-type="dfn" href="semantics-scripting.html#javascript-mime-type" id="ref-for-javascript-mime-type-3">JavaScript MIME type</a> to denote <a data-link-type="dfn" href="semantics-scripting.html#data-block" id="ref-for-data-block-2">data blocks</a>.</p>
     </li></ul>
     <p class="note" role="note">The requirement that <a data-link-type="dfn" href="semantics-scripting.html#data-block" id="ref-for-data-block-3">data blocks</a> must be denoted using a <a data-link-type="dfn" href="infrastructure.html#valid-mime-type" id="ref-for-valid-mime-type-11">valid MIME type</a> is in place to avoid potential future collisions. If this specification
  ever adds additional types of <a data-link-type="dfn" href="webappapis.html#concept-script" id="ref-for-concept-script-3">script</a>, they will be triggered by setting the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-3">type</a></code> attribute to something which is not a MIME type.
  By using a valid MIME type now, you ensure that your data block
  will not ever be reinterpreted as a different script type, even in future user agents.</p>
     <p><a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-2">Classic scripts</a> may either be embedded inline or may be imported
  from an external file using the <dfn class="dfn-paneled" data-dfn-for="script" data-dfn-type="element-attr" data-export="" id="element-attrdef-script-src"><code>src</code></dfn> attribute,
  which if specified gives the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URL</a> of the external script resource to use. If <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-4">src</a></code> is specified, it must be a <a data-link-type="dfn" href="infrastructure.html#valid-non-empty-url-potentially-surrounded-by-spaces" id="ref-for-valid-non-empty-url-potentially-surrounded-by-spaces-13">valid non-empty URL potentially surrounded by spaces</a>. The
  contents of inline <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-24">script</a></code> elements, or the external script resource, must conform with the
  requirements of the JavaScript specification’s <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#prod-Script">Script</a> production for <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-3">classic scripts</a>. <a data-link-type="biblio" href="references.html#biblio-ecma-262">[ECMA-262]</a></p>
     <p>When used to include <a data-link-type="dfn" href="semantics-scripting.html#data-block" id="ref-for-data-block-4">data blocks</a>, the data must be embedded inline, the format of the data
  must be given using the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-4">type</a></code> attribute, and the contents of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-25">script</a></code> element must
  conform to the requirements defined for the format used. The <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-5">src</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-charset" id="ref-for-element-attrdef-script-charset-3">charset</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-3">async</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-3">defer</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-crossorigin" id="ref-for-element-attrdef-script-crossorigin-2">crossorigin</a></code>, and <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-nonce" id="ref-for-element-attrdef-script-nonce-2">nonce</a></code> attributes must
  not be specified.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="script" data-dfn-type="element-attr" data-export="" id="element-attrdef-script-charset"><code>charset</code></dfn> attribute gives the character
  encoding of the external script resource. The attribute must not be specified if the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-6">src</a></code> attribute is not present, or if the script is not a <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-4">classic script</a>.
  If the attribute is set, its value
  must be an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-39">ASCII case-insensitive</a> match for one of the <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-15">labels</a> of an <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#encoding">encoding</a>, and must specify the same <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#encoding">encoding</a> as the <code>charset</code> parameter of the <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-32">Content-Type metadata</a> of the external
  file, if any. <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="script" data-dfn-type="element-attr" data-export="" id="element-attrdef-script-async"><code>async</code></dfn> and <dfn class="dfn-paneled" data-dfn-for="script" data-dfn-type="element-attr" data-export="" id="element-attrdef-script-defer"><code>defer</code></dfn> attributes are <a data-link-type="dfn" href="infrastructure.html#boolean-attribute" id="ref-for-boolean-attribute-32">boolean attributes</a> that indicate how the script should be executed. <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-5">Classic scripts</a> may specify <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-4">defer</a></code> or <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-4">async</a></code>.</p>
     <p>There are several possible modes that can be selected using these attributes, and depending on the
  script’s <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-5">type</a></code>.</p>
     <p>For <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-6">classic scripts</a>, if the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-5">async</a></code> attribute is present, then the classic script
  will be fetched <a data-link-type="dfn" href="infrastructure.html#in-parallel" id="ref-for-in-parallel-23">in parallel</a> to parsing and evaluated as soon as it is available
  (potentially before parsing completes). If the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-6">async</a></code> attribute is not present but the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-5">defer</a></code> attribute is present, then the <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-7">classic script</a> will be fetched <a data-link-type="dfn" href="infrastructure.html#in-parallel" id="ref-for-in-parallel-24">in parallel</a> and evaluated when the page has finished parsing. If neither attribute is
  present, then the script is fetched and evaluated immediately, blocking parsing until these are
  both complete.</p>
     <p>This is all summarized in the following schematic diagram:</p>
     <p><img alt="With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script." src="images/asyncdefer.svg" style="width: 80%; min-width: 690px;"></p>
     <p class="note" role="note"> The exact processing details for these attributes are, for mostly historical
  reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation
  requirements are therefore by necessity scattered throughout the specification. The algorithms
  below (in this section) describe the core of this processing, but these algorithms reference and
  are referenced by the parsing rules for <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-26">script</a></code> <a data-link-type="dfn" href="syntax.html#start-tag" id="ref-for-start-tag-7">start</a> and <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-41">end</a> tags in HTML, <a data-link-type="dfn" href="syntax.html#in-foreign-content" id="ref-for-in-foreign-content-1">in foreign content</a>, and in XML, the rules for the <a class="idl-code" data-link-type="method" href="webappapis.html#dom-document-write" id="ref-for-dom-document-write-3"><code>document.write()</code></a> method, the handling of <a data-link-type="dfn" href="webappapis.html#concept-script" id="ref-for-concept-script-4">scripting</a>, etc.</p>
     <p>The <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-6">defer</a></code> attribute may be specified even if the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-7">async</a></code> attribute is
  specified, to cause legacy Web browsers that only support <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-7">defer</a></code> (and not <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-8">async</a></code>) to fall back to the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-8">defer</a></code> behavior instead of the blocking behavior
  that is the default.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="script" data-dfn-type="element-attr" data-export="" id="element-attrdef-script-crossorigin"><code>crossorigin</code></dfn> attribute is a <a data-link-type="dfn" href="infrastructure.html#cors-settings-attribute" id="ref-for-cors-settings-attribute-5">CORS settings attribute</a>. For <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-8">classic scripts</a>, it controls whether error information
  will be exposed, when the script is obtained from other <a data-link-type="dfn" href="browsers.html#concept-cross-origin" id="ref-for-concept-cross-origin-25">origins</a>.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="script" data-dfn-type="element-attr" data-export="" id="element-attrdef-script-nonce"><code>nonce</code></dfn> attribute represents a
  cryptographic nonce ("number used once") which can be used by <em>Content Security Policy </em> to
  determine whether or not the script specified by an element will be executed. The value is text. <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a></p>
     <p>Changing the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-7">src</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-6">type</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-charset" id="ref-for-element-attrdef-script-charset-4">charset</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-9">async</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-9">defer</a></code>, <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-crossorigin" id="ref-for-element-attrdef-script-crossorigin-3">crossorigin</a></code>, and <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-nonce" id="ref-for-element-attrdef-script-nonce-3">nonce</a></code> attributes dynamically has no
  direct effect; these attributes are only used at specific times described below.</p>
     <p>The IDL attributes <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-src"><code>src</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-type"><code>type</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-charset"><code>charset</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-defer"><code>defer</code></dfn>, and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-nonce"><code>nonce</code></dfn>, must each <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-112">reflect</a> the
  respective content attributes of the same name.</p>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-crossorigin"><code>crossOrigin</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-113">reflect</a> the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-crossorigin" id="ref-for-element-attrdef-script-crossorigin-4">crossorigin</a></code> content attribute.</p>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-async"><code>async</code></dfn> IDL attribute controls whether
  the element will execute <a data-link-type="dfn" href="infrastructure.html#in-parallel" id="ref-for-in-parallel-25">in parallel</a> or not. If the element’s <a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-1">"non-blocking"</a> flag is
  set, then, on getting, the <code class="idl"><a data-link-type="idl" href="semantics-scripting.html#dom-htmlscriptelement-async" id="ref-for-dom-htmlscriptelement-async-2">async</a></code> IDL attribute must return true, and on
  setting, the <a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-2">"non-blocking"</a> flag must first be unset, and then the content attribute must
  be removed if the IDL attribute’s new value is false, and must be set to the empty string if the
  IDL attribute’s new value is true. If the element’s <a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-3">"non-blocking"</a> flag is <em>not</em> set, the IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-114">reflect</a> the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-10">async</a></code> content attribute.</p>
     <dl class="domintro">
      <dt><var>script</var> . <code class="idl"><a data-link-type="idl" href="semantics-scripting.html#dom-htmlscriptelement-text" id="ref-for-dom-htmlscriptelement-text-2">text</a></code> [ = <var>value</var> ]
      </dt><dd>
       Returns the <a data-link-type="dfn" href="infrastructure.html#child-text-content" id="ref-for-child-text-content-1">child text content</a> of the element. 
       <p>Can be set, to replace the element’s children with the given value.</p>
     </dd></dl>
     <p>The IDL attribute <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLScriptElement" data-dfn-type="attribute" data-export="" id="dom-htmlscriptelement-text"><code>text</code></dfn> must return the <a data-link-type="dfn" href="infrastructure.html#child-text-content" id="ref-for-child-text-content-2">child text content</a> of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-27">script</a></code> element. On setting, it must act the same way as the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute.</p>
     <p class="note" role="note">When inserted using the <a class="idl-code" data-link-type="method" href="webappapis.html#dom-document-write" id="ref-for-dom-document-write-4"><code>document.write()</code></a> method, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-28">script</a></code> elements execute (typically blocking further script execution or HTML parsing),
  but when inserted using <code>innerHTML</code> and <code>outerHTML</code> attributes, they do not
  execute at all.</p>
     <div class="example" id="example-39054809">
      <a class="self-link" href="semantics-scripting.html#example-39054809"></a> In this example, two <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-29">script</a></code> elements are used. One embeds an external <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-9">classic script</a>,
    and the other includes some data as a <a data-link-type="dfn" href="semantics-scripting.html#data-block" id="ref-for-data-block-5">data block</a>. 
<pre class="highlight"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"game-engine.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/x-game-map"</span><span class="nt">&gt;</span>
<span class="p">........</span><span class="nx">U</span><span class="p">.........</span><span class="nx">e</span>
<span class="nx">o</span><span class="p">............</span><span class="nx">A</span><span class="p">....</span><span class="nx">e</span>
<span class="p">.....</span><span class="nx">A</span><span class="p">.....</span><span class="nx">AAA</span><span class="p">....</span><span class="nx">e</span>
<span class="p">.</span><span class="nx">A</span><span class="p">..</span><span class="nx">AAA</span><span class="p">...</span><span class="nx">AAAAA</span><span class="p">...</span><span class="nx">e</span>
<span class="nt">&lt;/script&gt;</span>
</pre>
      <p>The data in this case might be used by the script to generate the map of a video game. The
    data doesn’t have to be used that way, though; maybe the map data is actually embedded in other
    parts of the page’s markup, and the data block here is just used by the site’s search engine to
    help users who are looking for particular features in their game maps.</p>
     </div>
     <div class="example" id="example-29b3c5da">
      <a class="self-link" href="semantics-scripting.html#example-29b3c5da"></a> The following sample shows how a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-30">script</a></code> element can be used to define a function that is
    then used by other parts of the document, as part of a <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-10">classic script</a>. It also shows how
    a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-31">script</a></code> element can be used to invoke script while the document is being parsed, in this
    case to initialize the form’s output. 
<pre class="highlight"><span class="nt">&lt;script&gt;</span>
  <span class="kd">function</span> <span class="nx">calculate</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">price</span> <span class="o">=</span> <span class="mi">52000</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">elements</span><span class="p">.</span><span class="nx">brakes</span><span class="p">.</span><span class="nx">checked</span><span class="p">)</span>
      <span class="nx">price</span> <span class="o">+=</span> <span class="mi">1000</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">elements</span><span class="p">.</span><span class="nx">radio</span><span class="p">.</span><span class="nx">checked</span><span class="p">)</span>
      <span class="nx">price</span> <span class="o">+=</span> <span class="mi">2500</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">elements</span><span class="p">.</span><span class="nx">turbo</span><span class="p">.</span><span class="nx">checked</span><span class="p">)</span>
      <span class="nx">price</span> <span class="o">+=</span> <span class="mi">5000</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">elements</span><span class="p">.</span><span class="nx">sticker</span><span class="p">.</span><span class="nx">checked</span><span class="p">)</span>
      <span class="nx">price</span> <span class="o">+=</span> <span class="mi">250</span><span class="p">;</span>
    <span class="nx">form</span><span class="p">.</span><span class="nx">elements</span><span class="p">.</span><span class="nx">result</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">price</span><span class="p">;</span>
  <span class="p">}</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;form</span> <span class="na">name=</span><span class="s">"pricecalc"</span> <span class="na">onsubmit=</span><span class="s">"return false"</span> <span class="na">onchange=</span><span class="s">"calculate(this)"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;fieldset&gt;</span>
  <span class="nt">&lt;legend&gt;</span>Work out the price of your car<span class="nt">&lt;/legend&gt;</span>
  <span class="nt">&lt;p&gt;</span>Base cost: £52000.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>Select additional options:<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;&lt;label&gt;&lt;input</span> <span class="na">type=</span><span class="s">checkbox</span> <span class="na">name=</span><span class="s">brakes</span><span class="nt">&gt;</span> Ceramic brakes (£1000)<span class="nt">&lt;/label&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;label&gt;&lt;input</span> <span class="na">type=</span><span class="s">checkbox</span> <span class="na">name=</span><span class="s">radio</span><span class="nt">&gt;</span> Satellite radio (£2500)<span class="nt">&lt;/label&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;label&gt;&lt;input</span> <span class="na">type=</span><span class="s">checkbox</span> <span class="na">name=</span><span class="s">turbo</span><span class="nt">&gt;</span> Turbo charger (£5000)<span class="nt">&lt;/label&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;label&gt;&lt;input</span> <span class="na">type=</span><span class="s">checkbox</span> <span class="na">name=</span><span class="s">sticker</span><span class="nt">&gt;</span> "XZ" sticker (£250)<span class="nt">&lt;/label&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;p&gt;</span>Total: £<span class="nt">&lt;output</span> <span class="na">name=</span><span class="s">result</span><span class="nt">&gt;&lt;/output&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/fieldset&gt;</span>
  <span class="nt">&lt;script&gt;</span>
  <span class="nx">calculate</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">forms</span><span class="p">.</span><span class="nx">pricecalc</span><span class="p">);</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</pre>
     </div>
     <h5 class="heading settled" data-level="4.12.1.1" id="script-processing-model"><span class="secno">4.12.1.1. </span><span class="content">Processing model</span><a class="self-link" href="semantics-scripting.html#script-processing-model"></a></h5>
     <p>A <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-32">script</a></code> element has several associated pieces of state.</p>
     <p>The first is a flag indicating whether or not the script block has been <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="already-started">"already started"</dfn>. Initially, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-33">script</a></code> elements must have this flag unset (script
  blocks, when created, are not "already started"). The <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-clone-ext">cloning steps</a> for <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-34">script</a></code> elements
  must set the "already started" flag on the copy if it is set on the element being cloned.</p>
     <p>The second is a flag indicating whether the element was <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="parser-inserted">"parser-inserted"</dfn>.
  Initially, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-35">script</a></code> elements must have this flag unset. It is set by the <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-18">HTML parser</a> and the <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-14">XML parser</a> on <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-36">script</a></code> elements they insert and affects the processing of those
  elements.</p>
     <p>The third is a flag indicating whether the element will <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="non-blocking">"non-blocking"</dfn>. Initially, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-37">script</a></code> elements must have this flag set. It is unset by the <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-19">HTML parser</a> and the <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-15">XML parser</a> on <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-38">script</a></code> elements they insert. In addition, whenever
  a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-39">script</a></code> element whose <a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-4">"non-blocking"</a> flag is set has an <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-11">async</a></code> content
  attribute added, the element’s <a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-5">"non-blocking"</a> flag must be unset.</p>
     <p>The fourth is a flag indicating whether or not the script block is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ready-to-be-parser-executed">"ready to be parser-executed"</dfn>. Initially, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-40">script</a></code> elements must have this flag unset
  (script blocks, when created, are not "ready to be parser-executed"). This flag is used only for
  elements that are also <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-1">"parser-inserted"</a>, to let the parser know when to execute the
  script.</p>
     <p>The fifth is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="the-scripts-type">the script’s type</dfn>, which is "<code>classic</code>". It is
  determined when the script is <a data-link-type="dfn" href="semantics-scripting.html#prepare-a-script" id="ref-for-prepare-a-script-1">prepared</a>, based on the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-7">type</a></code> attribute of the
  element at that time. Initially, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-41">script</a></code> elements must have this flag unset.</p>
     <p>The sixth is a flag indicating whether or not the script is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="from-an-external-file">from an external file</dfn>. It
  is determined when the script is <a data-link-type="dfn" href="semantics-scripting.html#prepare-a-script" id="ref-for-prepare-a-script-2">prepared</a>, based on the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-8">src</a></code> attribute of the
  element at that time.</p>
     <p>Finally, a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-42">script</a></code> element has <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="the-scripts-script">the script’s script</dfn>, which is a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-43">script</a></code> resulting from <a data-link-type="dfn" href="semantics-scripting.html#prepare-a-script" id="ref-for-prepare-a-script-3">preparing</a> the element. This is set asynchronously after the <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-11">classic script</a> is fetched. Once it is set, either to a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-44">script</a></code> in the
  case of success or to null in the case of failure, the fetching algorithms will note that <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="the-script-is-ready">the script is ready</dfn>, which can trigger other actions. The user agent must <a data-link-type="dfn" href="syntax.html#delay-the-load-event" id="ref-for-delay-the-load-event-29">delay the load event</a> of the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> until <a data-link-type="dfn" href="semantics-scripting.html#the-script-is-ready" id="ref-for-the-script-is-ready-1">the script is ready</a>.</p>
     <p>When a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-45">script</a></code> element that is not marked as being <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-2">"parser-inserted"</a> experiences one of
  the events listed in the following list, the user agent must <a data-link-type="dfn" href="infrastructure.html#immediately" id="ref-for-immediately-7">immediately</a> <a data-link-type="dfn" href="semantics-scripting.html#prepare-a-script" id="ref-for-prepare-a-script-4">prepare</a> the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-46">script</a></code> element:</p>
     <ul>
      <li data-md="">
       <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-47">script</a></code> element gets <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-15">inserted into a document</a>, at the time the node
 is inserted according to the DOM, after any other <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-48">script</a></code> elements inserted at the same time
 that are earlier in the <code>Document</code> in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-66">tree order</a>.</p>
      </li><li data-md="">
       <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-49">script</a></code> element is <a data-link-type="dfn" href="infrastructure.html#in-the-document" id="ref-for-in-the-document-18">in a <code>Document</code></a> and a node or document fragment is <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-insert">inserted</a> into the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-50">script</a></code> element, after any <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-51">script</a></code> elements <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-insert">inserted</a> at
 that time.</p>
      </li><li data-md="">
       <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-52">script</a></code> element is <a data-link-type="dfn" href="infrastructure.html#in-the-document" id="ref-for-in-the-document-19">in a <code>Document</code></a> and has a <code>src</code> attribute
 set where previously the element had no such attribute.</p>
     </li></ul>
     <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="prepare a script|preparing|prepared" data-noexport="" id="prepare-a-script">prepare a script</dfn>, the user agent must act
  as follows:</p>
     <ol>
      <li data-md="">
       <p>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-53">script</a></code> element is marked as having <a data-link-type="dfn" href="semantics-scripting.html#already-started" id="ref-for-already-started-1">"already started"</a>, then the user agent
  must abort these steps at this point. The script is not executed.</p>
      </li><li data-md="">
       <p>If the element has its <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-3">"parser-inserted"</a> flag set, then set <var>was-parser-inserted</var> to true and unset the element’s <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-4">"parser-inserted"</a> flag.
  Otherwise, set <var>was-parser-inserted</var> to false.</p>
       <p class="note" role="note">This is done so that if parser-inserted <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-54">script</a></code> elements fail to run when
  the parser tries to run them, e.g., because they are empty or specify an unsupported
  scripting language, another script can later mutate them and cause them to run again.</p>
      </li><li data-md="">
       <p>If <var>was-parser-inserted</var> is true and the element does not have an <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-12">async</a></code> attribute, then set the element’s <a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-6">"non-blocking"</a> flag to true.</p>
       <p class="note" role="note">This is done so that if a parser-inserted <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-55">script</a></code> element fails to run when
  the parser tries to run it, but it is later executed after a script dynamically updates it, it
  will execute in a non-blocking fashion even if the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-13">async</a></code> attribute isn’t set.</p>
      </li><li data-md="">
       <p>If the element has no <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-9">src</a></code> attribute, and its child nodes, if any, consist only of
  comment nodes and empty <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes, then abort these steps at this point. The script is
  not executed.</p>
      </li><li data-md="">
       <p>If the element is not <a data-link-type="dfn" href="infrastructure.html#in-the-document" id="ref-for-in-the-document-20">in a <code>Document</code></a>, then the user agent must abort these
  steps at this point. The script is not executed.</p>
      </li><li data-md="">
       <p>If either:</p>
       <ul>
        <li data-md="">
         <p>the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-56">script</a></code> element has a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-8">type</a></code> attribute and its value is the empty string, or</p>
        </li><li data-md="">
         <p>the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-57">script</a></code> element has no <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-9">type</a></code> attribute but it has a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-language" id="ref-for-element-attrdef-script-language-1">language</a></code> attribute and <em>that</em> attribute’s value is the empty string, or</p>
        </li><li data-md="">
         <p>the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-58">script</a></code> element has neither a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-10">type</a></code> attribute nor a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-language" id="ref-for-element-attrdef-script-language-2">language</a></code> attribute, then</p>
       </li></ul>
       <p>...let <var>the script block’s type string</var> for this <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-59">script</a></code> element be
  "`text/javascript`".</p>
       <p>Otherwise, if the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-60">script</a></code> element has a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-11">type</a></code> attribute, let <var>the script block’s type string</var> for this <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-61">script</a></code> element be the value of that
  attribute with any leading or trailing sequences of <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-56">space characters</a> removed.</p>
       <p>Otherwise, the element has a non-empty <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-language" id="ref-for-element-attrdef-script-language-3">language</a></code> attribute; let <var>the script block’s type string</var> for this <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-62">script</a></code> element be the concatenation of
  the string "`text/`" followed by the value of the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-language" id="ref-for-element-attrdef-script-language-4">language</a></code> attribute.</p>
       <p class="note" role="note">The <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-language" id="ref-for-element-attrdef-script-language-5">language</a></code> attribute is never conforming, and is always ignored
  if there is a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-type" id="ref-for-element-attrdef-script-type-12">type</a></code> attribute present.</p>
       <p>Determine <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-1">the script’s type</a> as follows:</p>
       <ul>
        <li data-md="">
         <p>If <var>the script block’s type string</var> is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-40">ASCII case-insensitive</a> match for
 any <a data-link-type="dfn" href="semantics-scripting.html#javascript-mime-type" id="ref-for-javascript-mime-type-4">JavaScript MIME type</a>, <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-2">the script’s type</a> is "<code>classic</code>".</p>
        </li><li data-md="">
         <p>If neither of the above conditions are true, then abort these steps at this point. No script
 is executed.</p>
       </li></ul>
      </li><li data-md="">
       <p>If <var>was-parser-inserted</var> is true, then flag the element as <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-5">"parser-inserted"</a> again, and set the element’s <a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-7">"non-blocking"</a> flag to false.</p>
      </li><li data-md="">
       <p>The user agent must set the element’s <a data-link-type="dfn" href="semantics-scripting.html#already-started" id="ref-for-already-started-2">"already started"</a> flag.</p>
      </li><li data-md="">
       <p>If the element is flagged as <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-6">"parser-inserted"</a>, but the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> is not the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> of the parser that created the element, then abort these steps.</p>
      </li><li data-md="">
       <p>If <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-3">scripting is disabled</a> for the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-63">script</a></code> element, then abort these steps at this
   point. The script is not executed.</p>
       <p class="note" role="note">The definition of <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-4">scripting is disabled</a> means that, amongst others,
   the following scripts will not execute: scripts in <code class="idl"><a data-link-type="idl" href="https://xhr.spec.whatwg.org/#interface-xmlhttprequest">XMLHttpRequest</a></code>'s <code class="idl"><a data-link-type="idl" href="https://xhr.spec.whatwg.org/#the-responsexml-attribute">responseXML</a></code> documents, scripts in <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/DOM-Parsing/#the-domparser-interface">DOMParser</a></code>-created documents, scripts
   in documents created by <code>XSLTProcessor</code>’s <code>transformToDocument</code> feature, and scripts that are first inserted by a script into a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that was created
   using the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-domimplementation-createdocument">createDocument()</a></code> API. <a data-link-type="biblio" href="references.html#biblio-xhr">[XHR]</a> <a data-link-type="biblio" href="references.html#biblio-dom-parsing">[DOM-Parsing]</a> <a data-link-type="biblio" href="references.html#biblio-dom">[DOM]</a></p>
      </li><li data-md="">
       <p>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-64">script</a></code> element does not have a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-10">src</a></code> content attribute, and the <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#should-block-inline">Should element’s inline behavior be blocked by Content Security Policy?</a> algorithm
   returns "<code>Blocked</code>" when executed upon the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-65">script</a></code> element, "<code>script</code>", and the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-66">script</a></code> element’s <a data-link-type="dfn" href="infrastructure.html#child-text-content" id="ref-for-child-text-content-3">child text content</a>, then abort these steps. The script is not executed. <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a></p>
      </li><li data-md="">
       <p>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-67">script</a></code> element has an <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-event" id="ref-for-element-attrdef-script-event-1">event</a></code> attribute and a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-for" id="ref-for-element-attrdef-script-for-1">for</a></code> attribute,
   and <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-3">the script’s type</a> is "<code>classic</code>", then run these substeps:</p>
       <ol>
        <li data-md="">
         <p>Let <var>for</var> be the value of the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-for" id="ref-for-element-attrdef-script-for-2">for</a></code> attribute.</p>
        </li><li data-md="">
         <p>Let <var>event</var> be the value of the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-script-event" id="ref-for-element-attrdef-script-event-2">event</a></code> attribute.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#strip-leading-and-trailing-whitespace" id="ref-for-strip-leading-and-trailing-whitespace-13">Strip leading and trailing whitespace</a> from <var>event</var> and <var>for</var>.</p>
        </li><li data-md="">
         <p>If <var>for</var> is not an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-41">ASCII case-insensitive</a> match for the string "<code>window</code>",
   then the user agent must abort these steps at this point. The script is not executed.</p>
        </li><li data-md="">
         <p>If <var>event</var> is not an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-42">ASCII case-insensitive</a> match for either the string
   "<code>onload</code>" or the string "`onload()`", then the user agent must abort these steps at this
   point. The script is not executed.</p>
       </li></ol>
      </li><li data-md="">
       <p>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-68">script</a></code> element has a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-charset" id="ref-for-element-attrdef-script-charset-5">charset</a></code> attribute, then let <var>encoding</var> be
   the result of <a data-link-type="dfn" href="infrastructure.html#getting-an-encoding" id="ref-for-getting-an-encoding-3">getting an encoding</a> from the value of the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-charset" id="ref-for-element-attrdef-script-charset-6">charset</a></code> attribute.</p>
       <p>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-69">script</a></code> element does not have a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-charset" id="ref-for-element-attrdef-script-charset-7">charset</a></code> attribute, or if <a data-link-type="dfn" href="infrastructure.html#getting-an-encoding" id="ref-for-getting-an-encoding-4">getting an encoding</a> failed, let <var>encoding</var> be the same as <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#encoding">the encoding of the document itself</a>.</p>
      </li><li data-md="">
       <p>Let <var>CORS setting</var> be the current state of the element’s <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-crossorigin" id="ref-for-element-attrdef-script-crossorigin-5">crossorigin</a></code> content attribute.</p>
      </li><li data-md="">
       <p>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-70">script</a></code> element has a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-nonce" id="ref-for-element-attrdef-script-nonce-4">nonce</a></code> attribute, then let <var>cryptographic nonce</var> be that attribute’s value.</p>
       <p>Otherwise, let <var>cryptographic nonce</var> be the empty string.</p>
      </li><li data-md="">
       <p>Let <var>parser state</var> be "<code>parser-inserted</code>" if the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-71">script</a></code> element has been flagged
   as <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-7">"parser-inserted"</a>, and "`not parser-inserted`" otherwise.</p>
      </li><li data-md="">
       <p>Let <var>settings</var> be the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <code class="idl"><a data-link-type="idl" href="browsers.html#window-window" id="ref-for-window-window-8">Window</a></code> object’s <a data-link-type="dfn" href="webappapis.html#environment-settings-object" id="ref-for-environment-settings-object-11">environment settings object</a>.</p>
      </li><li data-md="">
       <p>If the element has a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-11">src</a></code> content attribute, run these substeps:</p>
       <ol>
        <li data-md="">
         <p>Let <var>src</var> be the value of the element’s <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-12">src</a></code> attribute.</p>
        </li><li data-md="">
         <p>If <var>src</var> is the empty string, <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-110">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-138">fire a simple event</a> named <code>error</code> at the element, and abort these steps.</p>
        </li><li data-md="">
         <p>Set the element’s <a data-link-type="dfn" href="semantics-scripting.html#from-an-external-file" id="ref-for-from-an-external-file-1">from an external file</a> flag.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-32">Parse</a> <var>src</var> relative to the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>.</p>
        </li><li data-md="">
         <p>If the previous step failed, <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-111">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-139">fire a simple event</a> named <code>error</code> at the element, and abort these steps.</p>
         <p>Otherwise, let <var>url</var> be the <a data-link-type="dfn" href="infrastructure.html#resulting-url-record" id="ref-for-resulting-url-record-9">resulting URL record</a>.</p>
        </li><li data-md="">
         <p>Switch on <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-4">the script’s type</a>:</p>
         <dl class="switch">
          <dt>`"classic"`
          </dt><dd><a data-link-type="dfn" href="webappapis.html#fetching-a-classic-script" id="ref-for-fetching-a-classic-script-1">Fetch a classic script</a> given <var>url</var>, <var>CORS setting</var>, <var>cryptographic nonce</var>, <var>parser state</var>, <var>settings</var>, and <var>encoding</var>. 
         </dd></dl>
          When the chosen algorithm asynchronously completes, set <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-script" id="ref-for-the-scripts-script-1">the script’s script</a> to the
   result. At that time, <a data-link-type="dfn" href="semantics-scripting.html#the-script-is-ready" id="ref-for-the-script-is-ready-2">the script is ready</a>. 
         <p>For performance reasons, user agents may start fetching the classic script
   (as defined above) as the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-13">src</a></code> attribute is set, instead, in the hope that the
   element will be <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-16">inserted into the document</a> (and that the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-crossorigin" id="ref-for-element-attrdef-script-crossorigin-6">crossorigin</a></code> attribute won’t change value in the meantime). Either way, once
   the element is <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-17">inserted into the document</a>, the load must have
   started as described in this step. If the UA performs such prefetching, but the element
   is never inserted in the document, or the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-14">src</a></code> attribute is dynamically
   changed, or the <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-crossorigin" id="ref-for-element-attrdef-script-crossorigin-7">crossorigin</a></code> attribute is dynamically changed, then the user
   agent will not execute the script so obtained, and the fetching process will have been
   effectively wasted.</p>
       </li></ol>
      </li><li data-md="">
       <p>If the element does not have a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-15">src</a></code> content attribute, run these substeps:</p>
       <ol>
        <li data-md="">
         <p>Let <var>source text</var> be the value of the <code class="idl"><a data-link-type="idl" href="semantics-scripting.html#dom-htmlscriptelement-text" id="ref-for-dom-htmlscriptelement-text-3">text</a></code> IDL attribute.</p>
        </li><li data-md="">
         <p>Switch on <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-5">the script’s type</a>:</p>
         <dl class="switch">
          <dt>`"classic"`
          </dt><dd>
           <ol>
            <li data-md="">
             <p>Let <var>script</var> be the result of <a data-link-type="dfn" href="webappapis.html#create-a-classic-script" id="ref-for-create-a-classic-script-1">creating a classic script</a> using <var>source text</var> and <var>settings</var>.</p>
            </li><li data-md="">
             <p>Set <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-script" id="ref-for-the-scripts-script-2">the script’s script</a> to <var>script</var>.</p>
            </li><li data-md="">
             <p><a data-link-type="dfn" href="semantics-scripting.html#the-script-is-ready" id="ref-for-the-script-is-ready-3">The script is ready</a>.</p>
           </li></ol>
         </dd></dl>
       </li></ol>
      </li><li data-md="">
       <p>Then, follow the first of the following options that describes the situation:</p>
       <dl class="switch">
        <dt>
        </dt><dd>
         <table>
          <thead>
           <tr>
            <th><a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-6">the script’s type</a> 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-16">src</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-10">defer</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-14">async</a></code> present? 
            </th><th>other conditions 
          </th></tr></thead><tbody>
           <tr>
            <td>`"classic"` 
            </td><td>yes 
            </td><td>yes 
            </td><td>no 
            </td><td>element flagged as <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-8">"parser-inserted"</a> 
         </td></tr></tbody></table>
          Add the element to the end of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="list of scripts that will execute when the document has finished parsing" data-noexport="" id="list-of-scripts-that-will-execute-when-the-document-has-finished-parsing">list of scripts that will execute when the
     document has finished parsing</dfn> associated with the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> of the parser that
     created the element. 
         <p>When the <a data-link-type="dfn" href="semantics-scripting.html#the-script-is-ready" id="ref-for-the-script-is-ready-4">the script is ready</a>, set the element’s <a data-link-type="dfn" href="semantics-scripting.html#ready-to-be-parser-executed" id="ref-for-ready-to-be-parser-executed-1">"ready to be parser-executed"</a> flag. The parser will handle executing the script.</p>
        <p></p>
        </dd><dt>
        </dt><dd>
         <table>
          <thead>
           <tr>
            <th><a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-7">the script’s type</a> 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-17">src</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-11">defer</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-15">async</a></code> present? 
            </th><th>other conditions 
          </th></tr></thead><tbody>
           <tr>
            <td>`"classic"` 
            </td><td>yes 
            </td><td>no 
            </td><td>no 
            </td><td>element flagged as <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-9">"parser-inserted"</a> 
         </td></tr></tbody></table>
          The element is the <a data-link-type="dfn" href="semantics-scripting.html#pending-parsing-blocking-script" id="ref-for-pending-parsing-blocking-script-1">pending parsing-blocking script</a> of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> of the
     parser that created the element. (There can only be one such script per <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> at a
     time.) 
         <p>When <a data-link-type="dfn" href="semantics-scripting.html#the-script-is-ready" id="ref-for-the-script-is-ready-5">the script is ready</a>, set the element’s <a data-link-type="dfn" href="semantics-scripting.html#ready-to-be-parser-executed" id="ref-for-ready-to-be-parser-executed-2">"ready to be parser-executed"</a> flag. The parser will handle executing the script.</p>
        </dd><dt>
        </dt><dd>
         <table>
          <thead>
           <tr>
            <th><a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-8">the script’s type</a> 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-18">src</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-12">defer</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-16">async</a></code> present? 
            </th><th>other conditions 
          </th></tr></thead><tbody>
           <tr>
            <td>`"classic"` 
            </td><td>yes 
            </td><td>yes or no 
            </td><td>no 
            </td><td><a data-link-type="dfn" href="semantics-scripting.html#non-blocking" id="ref-for-non-blocking-8">"non-blocking"</a> flag not set on element 
         </td></tr></tbody></table>
          Add the element to the end of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="list of scripts that will execute in order as soon as possible" data-noexport="" id="list-of-scripts-that-will-execute-in-order-as-soon-as-possible">list of scripts that will execute in order
     as soon as possible</dfn> associated with the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-72">script</a></code> element at the time the <a data-link-type="dfn" href="semantics-scripting.html#prepare-a-script" id="ref-for-prepare-a-script-5">prepare a script</a> algorithm started. 
         <p>When <a data-link-type="dfn" href="semantics-scripting.html#the-script-is-ready" id="ref-for-the-script-is-ready-6">the script is ready</a>, run the following steps:</p>
         <ol>
          <li data-md="">
           <p>If the element is not now the first element in the <a data-link-type="dfn" href="semantics-scripting.html#list-of-scripts-that-will-execute-in-order-as-soon-as-possible" id="ref-for-list-of-scripts-that-will-execute-in-order-as-soon-as-possible-1">list of scripts that will execute in order as soon as possible</a> to which it was
 added above, then mark the element as ready but abort these steps without executing the
 script yet.</p>
          </li><li data-md="">
           <p><var>Execution</var>: <a data-link-type="dfn" href="semantics-scripting.html#execute-a-script-block" id="ref-for-execute-a-script-block-1">Execute the script block</a> corresponding to the first script
 element in this <a data-link-type="dfn" href="semantics-scripting.html#list-of-scripts-that-will-execute-in-order-as-soon-as-possible" id="ref-for-list-of-scripts-that-will-execute-in-order-as-soon-as-possible-2">list of scripts that will execute in order as soon as possible</a>.</p>
          </li><li data-md="">
           <p>Remove the first element from this <a data-link-type="dfn" href="semantics-scripting.html#list-of-scripts-that-will-execute-in-order-as-soon-as-possible" id="ref-for-list-of-scripts-that-will-execute-in-order-as-soon-as-possible-3">list of scripts that will execute in order as soon as possible</a>.</p>
          </li><li data-md="">
           <p>If this <a data-link-type="dfn" href="semantics-scripting.html#list-of-scripts-that-will-execute-in-order-as-soon-as-possible" id="ref-for-list-of-scripts-that-will-execute-in-order-as-soon-as-possible-4">list of scripts that will execute in order as soon as possible</a> is still
 not empty and the first entry has already been marked as ready, then jump back to the
 step labeled <var>Execution</var>.</p>
         </li></ol>
        </dd><dt>
        </dt><dd>
         <table>
          <thead>
           <tr>
            <th><a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-9">the script’s type</a> 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-19">src</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-13">defer</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-17">async</a></code> present? 
            </th><th>other conditions 
          </th></tr></thead><tbody>
           <tr>
            <td>`"classic"` 
            </td><td>yes 
            </td><td>yes or no 
            </td><td>yes or no 
            </td><td>n/a 
         </td></tr></tbody></table>
          The element must be added to the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="set-of-scripts-that-will-execute-as-soon-as-possible">set of scripts that will execute as soon as possible</dfn> of the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-73">script</a></code> element at the time the <a data-link-type="dfn" href="semantics-scripting.html#prepare-a-script" id="ref-for-prepare-a-script-6">prepare a script</a> algorithm started. 
         <p>When <a data-link-type="dfn" href="semantics-scripting.html#the-script-is-ready" id="ref-for-the-script-is-ready-7">the script is ready</a>, <a data-link-type="dfn" href="semantics-scripting.html#execute-a-script-block" id="ref-for-execute-a-script-block-2">execute the script block</a> and then remove the
     element from the <a data-link-type="dfn" href="semantics-scripting.html#set-of-scripts-that-will-execute-as-soon-as-possible" id="ref-for-set-of-scripts-that-will-execute-as-soon-as-possible-1">set of scripts that will execute as soon as possible</a>.</p>
        <p></p>
        </dd><dt>
        </dt><dd>
         <table>
          <thead>
           <tr>
            <th><a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-10">the script’s type</a> 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-20">src</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-14">defer</a></code> present? 
            </th><th><code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-18">async</a></code> present? 
            </th><th>other conditions 
          </th></tr></thead><tbody>
           <tr>
            <td>`"classic"` 
            </td><td>no 
            </td><td>yes or no 
            </td><td>yes or no 
            </td><td>
             All of the following: 
             <ul>
              <li data-md="">
               <p>element flagged as <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-10">"parser-inserted"</a></p>
              </li><li data-md="">
               <p>an <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-16">XML parser</a> or an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-20">HTML parser</a> whose <a data-link-type="dfn" href="syntax.html#script-nesting-level" id="ref-for-script-nesting-level-1">script nesting level</a> is not greater than one created the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-74">script</a></code></p>
              </li><li data-md="">
               <p>the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> of the <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-17">XML parser</a> or <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-21">HTML parser</a> that created
the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-75">script</a></code> <a data-link-type="dfn" href="document-metadata.html#have-a-style-sheet-that-is-blocking-scripts" id="ref-for-have-a-style-sheet-that-is-blocking-scripts-3">has a style sheet that is blocking scripts</a></p>
             </li></ul>
         </td></tr></tbody></table>
          The element is the <a data-link-type="dfn" href="semantics-scripting.html#pending-parsing-blocking-script" id="ref-for-pending-parsing-blocking-script-2">pending parsing-blocking script</a> of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> of the
     parser that created the element. (There can only be one such script per <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> at a
     time.) 
         <p>Set the element’s <a data-link-type="dfn" href="semantics-scripting.html#ready-to-be-parser-executed" id="ref-for-ready-to-be-parser-executed-3">"ready to be parser-executed"</a> flag. The parser will handle
     executing the script.</p>
        <p></p>
        </dd><dt>Otherwise
        </dt><dd><a data-link-type="dfn" href="infrastructure.html#immediately" id="ref-for-immediately-8">Immediately</a> <a data-link-type="dfn" href="semantics-scripting.html#execute-a-script-block" id="ref-for-execute-a-script-block-3">execute the script block</a>, even if other scripts are already
     executing.
       </dd></dl>
     </li></ol>
     <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="pending-parsing-blocking-script">pending parsing-blocking script</dfn> of a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is used by the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s
  parser(s).</p>
     <p class="note" role="note">If a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-76">script</a></code> element that blocks a parser gets moved to another <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> before it would normally have stopped blocking that parser, it nonetheless continues blocking that
  parser until the condition that causes it to be blocking the parser no longer applies (e.g., if
  the script is a <a data-link-type="dfn" href="semantics-scripting.html#pending-parsing-blocking-script" id="ref-for-pending-parsing-blocking-script-3">pending parsing-blocking script</a> because there was <a data-link-type="dfn" href="document-metadata.html#a-style-sheet-that-is-blocking-scripts" id="ref-for-a-style-sheet-that-is-blocking-scripts-2">a style sheet that is blocking scripts</a> when it was parsed, but then the script is moved to
  another <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> before the style sheet loads, the script still blocks the parser until the
  style sheets are all loaded, at which time the script executes and the parser is unblocked).</p>
     <p>When the user agent is required to <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="execute a script block|execute|execute the script block" data-noexport="" id="execute-a-script-block">execute a script block</dfn>, it must run the following steps:</p>
     <ol>
      <li data-md="">
       <p>If the element is flagged as <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-11">"parser-inserted"</a>, but the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> is not the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> of the parser that created the element, then abort these steps.</p>
      </li><li data-md="">
       <p>If <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-script" id="ref-for-the-scripts-script-3">the script’s script</a> is null, <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-140">fire a simple event</a> named <code>error</code> at the element,
  and abort these steps.</p>
      </li><li data-md="">
       <p>If the script is <a data-link-type="dfn" href="semantics-scripting.html#from-an-external-file" id="ref-for-from-an-external-file-2">from an external file</a>, then
  increment the <a data-link-type="dfn" href="webappapis.html#ignore-destructive-writes-counter" id="ref-for-ignore-destructive-writes-counter-1">ignore-destructive-writes counter</a> of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-77">script</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>. Let <var>neutralized doc</var> be that <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>.</p>
      </li><li data-md="">
       <p>Let <var>old script element</var> be the value to which the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-78">script</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <code class="idl"><a data-link-type="idl" href="dom.html#dom-document-currentscript" id="ref-for-dom-document-currentscript-2">currentScript</a></code> object was most recently set.</p>
      </li><li data-md="">
       <p>Switch on <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-11">the script’s type</a>:</p>
       <dl class="switch">
        <dt>`"classic"`
        </dt><dd>
         <ol>
          <li data-md="">
           <p>Set the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-79">script</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <code class="idl"><a data-link-type="idl" href="dom.html#dom-document-currentscript" id="ref-for-dom-document-currentscript-3">currentScript</a></code> attribute to the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-80">script</a></code> element.</p>
           <p class="note" role="note">This does not use the <a data-link-type="dfn" href="infrastructure.html#in-the-document" id="ref-for-in-the-document-21">in a document</a> check, as the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-81">script</a></code> element could have been removed from the document prior to execution, and in that
 scenario <code class="idl"><a data-link-type="idl" href="dom.html#dom-document-currentscript" id="ref-for-dom-document-currentscript-4">currentScript</a></code> still needs to point to it.</p>
          </li><li data-md="">
           <p><a data-link-type="dfn" href="webappapis.html#run-a-classic-script" id="ref-for-run-a-classic-script-1">Run the classic script</a> given by <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-script" id="ref-for-the-scripts-script-4">the script’s script</a>.</p>
         </li></ol>
       </dd></dl>
      </li><li data-md="">
       <p>Set the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-82">script</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <code class="idl"><a data-link-type="idl" href="dom.html#dom-document-currentscript" id="ref-for-dom-document-currentscript-5">currentScript</a></code> object to <var>old script element</var>.</p>
      </li><li data-md="">
       <p>Decrement the <a data-link-type="dfn" href="webappapis.html#ignore-destructive-writes-counter" id="ref-for-ignore-destructive-writes-counter-2">ignore-destructive-writes counter</a> of <var>neutralized doc</var>, if it was
  incremented in the earlier step.</p>
      </li><li data-md="">
       <p>If <a data-link-type="dfn" href="semantics-scripting.html#the-scripts-type" id="ref-for-the-scripts-type-12">the script’s type</a> is "<code>classic</code>" and the script is <a data-link-type="dfn" href="semantics-scripting.html#from-an-external-file" id="ref-for-from-an-external-file-3">from an external file</a>, <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-141">fire a simple event</a> named <code>load</code> at the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-83">script</a></code> element.</p>
       <p>Otherwise <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-112">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-142">fire a simple event</a> named <code>load</code> at the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-84">script</a></code> element.</p>
     </li></ol>
     <h5 class="heading settled" data-level="4.12.1.2" id="scripting-languages"><span class="secno">4.12.1.2. </span><span class="content">Scripting languages</span><a class="self-link" href="semantics-scripting.html#scripting-languages"></a></h5>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="javascript-mime-type">JavaScript MIME type</dfn> is a <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-24">MIME type</a> string that is one of the
  following and refers to JavaScript: <a data-link-type="biblio" href="references.html#biblio-ecma-262">[ECMA-262]</a></p>
     <ul class="brief">
      <li><code>application/ecmascript</code> 
      </li><li><code>application/javascript</code> 
      </li><li><code>application/x-ecmascript</code> 
      </li><li><code>application/x-javascript</code> 
      </li><li><code>text/ecmascript</code> 
      </li><li><code>text/javascript</code> 
      </li><li><code>text/javascript1.0</code> 
      </li><li><code>text/javascript1.1</code> 
      </li><li><code>text/javascript1.2</code> 
      </li><li><code>text/javascript1.3</code> 
      </li><li><code>text/javascript1.4</code> 
      </li><li><code>text/javascript1.5</code> 
      </li><li><code>text/jscript</code> 
      </li><li><code>text/livescript</code> 
      </li><li><code>text/x-ecmascript</code> 
      </li><li><code>text/x-javascript</code> 
     </li></ul>
     <p>User agents must recognize all <a data-link-type="dfn" href="semantics-scripting.html#javascript-mime-type" id="ref-for-javascript-mime-type-5">JavaScript MIME types</a>.</p>
     <p>User agents may support other <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-25">MIME types</a> for other languages, but must not support other <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-26">MIME types</a> for the languages in the list above. User agents are not required to support
  JavaScript. The processing model for languages other than JavaScript is outside the scope of this
  specification.</p>
     <p>The following <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-27">MIME types</a> (with or without parameters) must not be interpreted as scripting
  languages:</p>
     <ul>
      <li data-md="">
       <p>`text/plain`</p>
      </li><li data-md="">
       <p>`text/xml`</p>
      </li><li data-md="">
       <p>`application/octet-stream`</p>
      </li><li data-md="">
       <p>`application/xml`</p>
     </li></ul>
     <p class="note" role="note">These types are explicitly listed here because they are poorly-defined types that
  are nonetheless likely to be used as formats for data blocks, and it would be problematic if they
  were suddenly to be interpreted as script by a user agent.</p>
     <p>When examining types to determine if they represent supported languages, user agents must not
  ignore MIME parameters. Types are to be compared including all parameters.</p>
     <p class="note" role="note">For example, types that include the <code>charset</code> parameter will not be
  recognized as referencing any of the scripting languages listed above.</p>
     <h5 class="heading settled" data-level="4.12.1.3" id="restrictions-for-contents-of-script-elements"><span class="secno">4.12.1.3. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="script content restrictions" data-noexport="" id="script-content-restrictions">Restrictions for contents of <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-85">script</a></code> elements</dfn></span><a class="self-link" href="semantics-scripting.html#restrictions-for-contents-of-script-elements"></a></h5>
     <p class="note" role="note">The easiest and safest way to avoid the rather strange restrictions described in
  this section is to always escape "`&lt;!--`" as "`&lt;\!--`", "`&lt;script`" as "`&lt;\script`",
  and "`&lt;/script`" as "`&lt;\/script`" when these sequences appear in literals in scripts (e.g.,
  in strings, regular expressions, or comments), and to avoid writing code that uses such constructs
  in expressions. Doing so avoids the pitfalls that the restrictions in this section are prone to
  triggering: namely, that, for historical reasons, parsing of <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-86">script</a></code> blocks in HTML is a
  strange and exotic practice that acts unintuitively in the face of these sequences.</p>
     <p>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> of a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-87">script</a></code> element must match the <code>script</code> production in
  the following ABNF, the character set for which is Unicode. <a data-link-type="biblio" href="references.html#biblio-abnf">[ABNF]</a></p>
<pre data-highlight="abnf">script        = outer *( comment-open inner comment-close outer )

outer         = &lt; any string that doesn’t contain a substring that matches not-in-outer &gt;
not-in-outer  = comment-open
inner         = &lt; any string that doesn’t contain a substring that matches not-in-inner &gt;
not-in-inner  = comment-close / script-open

comment-open  = "&lt;!--"
comment-close = "--&gt;"
script-open   = "&lt;" s c r i p t tag-end

s             =  %x0053 ; U+0053 LATIN CAPITAL LETTER S
s             =/ %x0073 ; U+0073 LATIN SMALL LETTER S
c             =  %x0043 ; U+0043 LATIN CAPITAL LETTER C
c             =/ %x0063 ; U+0063 LATIN SMALL LETTER C
r             =  %x0052 ; U+0052 LATIN CAPITAL LETTER R
r             =/ %x0072 ; U+0072 LATIN SMALL LETTER R
i             =  %x0049 ; U+0049 LATIN CAPITAL LETTER I
i             =/ %x0069 ; U+0069 LATIN SMALL LETTER I
p             =  %x0050 ; U+0050 LATIN CAPITAL LETTER P
p             =/ %x0070 ; U+0070 LATIN SMALL LETTER P
t             =  %x0054 ; U+0054 LATIN CAPITAL LETTER T
t             =/ %x0074 ; U+0074 LATIN SMALL LETTER T

tag-end       =  %x0009 ; U+0009 CHARACTER TABULATION (tab)
tag-end       =/ %x000A ; U+000A LINE FEED (LF)
tag-end       =/ %x000C ; U+000C FORM FEED (FF)
tag-end       =/ %x0020 ; U+0020 SPACE
tag-end       =/ %x002F ; U+002F SOLIDUS (/)
tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (&gt;)
</pre>
     <p>When a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-88">script</a></code> element contains <a data-link-type="dfn" href="semantics-scripting.html#script-documentation" id="ref-for-script-documentation-2">script documentation</a>, there are further restrictions on
  the contents of the element, as described in the section below.</p>
     <div class="example" id="example-dbeb2b29">
      <a class="self-link" href="semantics-scripting.html#example-dbeb2b29"></a> The following script illustrates this issue. Suppose you have a script that contains a string,
    as in: 
<pre class="highlight"><span class="kd">var</span> <span class="nx">example</span> <span class="o">=</span> <span class="s1">'Consider this string: &lt;!-- &lt;script&gt;'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">example</span><span class="p">);</span>
</pre>
      <p>If one were to put this string directly in a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-89">script</a></code> block, it would violate the
    restrictions above:</p>
<pre class="highlight"><span class="nt">&lt;script&gt;</span>
  <span class="kd">var</span> <span class="nx">example</span> <span class="o">=</span> <span class="s1">'Consider this string: &lt;!-- &lt;script&gt;'</span><span class="p">;</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">example</span><span class="p">);</span>
<span class="nt">&lt;/script&gt;</span>
</pre>
      <p>The bigger problem, though, and the reason why it would violate those restrictions, is that
    actually the script would get parsed weirdly: <em>the script block above is not terminated</em>.
    That is, what looks like a "`&lt;/script&gt;`" end tag in this snippet is actually still part of
    the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-90">script</a></code> block. The script doesn’t execute (since it’s not terminated); if it somehow were
    to execute, as it might if the markup looked as follows, it would fail because the script is not
    valid JavaScript:</p>
<pre class="highlight"><span class="nt">&lt;script&gt;</span>
  <span class="kd">var</span> <span class="nx">example</span> <span class="o">=</span> <span class="s1">'Consider this string: &lt;!-- &lt;script&gt;'</span><span class="p">;</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">example</span><span class="p">);</span>
<span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- despite appearances, this is actually part of the script still! --&gt;</span>
<span class="nt">&lt;script&gt;</span>
  <span class="p">...</span> <span class="c1">// this is the same script block still...</span>
<span class="nt">&lt;/script&gt;</span>
</pre>
      <p>What is going on here is that for legacy reasons, "`&lt;!--`" and "`&lt;script`" strings in <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-91">script</a></code> elements in HTML need to be balanced in order for the parser to consider closing the
    block.</p>
      <p>By escaping the problematic strings as mentioned at the top of this section, the problem is
    avoided entirely:</p>
<pre class="highlight"><span class="nt">&lt;script&gt;</span>
  <span class="kd">var</span> <span class="nx">example</span> <span class="o">=</span> <span class="s1">'Consider this string: &lt;\!-- &lt;\script&gt;'</span><span class="p">;</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">example</span><span class="p">);</span>
<span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- this is just a comment between script blocks --&gt;</span>
<span class="nt">&lt;script&gt;</span>
  <span class="p">...</span> <span class="c1">// this is a new script block</span>
<span class="nt">&lt;/script&gt;</span>
</pre>
      <p>It is possible for these sequences to naturally occur in script expressions, as in the
    following examples:</p>
<pre class="highlight"><span class="k">if</span> <span class="p">(</span><span class="nx">x</span><span class="c">&lt;!--</span><span class="nx">y</span><span class="p">)</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">player</span><span class="o">&lt;</span><span class="nx">script</span> <span class="p">)</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
</pre>
      <p>In such cases the characters cannot be escaped, but the expressions can be rewritten so that
    the sequences don’t occur, as in:</p>
<pre class="highlight"><span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">&lt;</span> <span class="o">!--</span><span class="nx">y</span><span class="p">)</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!--</span><span class="nx">y</span> <span class="o">&gt;</span> <span class="nx">x</span><span class="p">)</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="o">--</span><span class="nx">y</span><span class="p">)</span> <span class="o">&gt;</span> <span class="nx">x</span><span class="p">)</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">player</span> <span class="o">&lt;</span> <span class="nx">script</span><span class="p">)</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">script</span> <span class="o">&gt;</span> <span class="nx">player</span><span class="p">)</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
</pre>
      <p>Doing this also avoids a different pitfall as well: for related historical reasons, the string
    "`&lt;!--`" in <a data-link-type="dfn" href="webappapis.html#classic-script" id="ref-for-classic-script-12">classic scripts</a> is actually treated as a line comment start, just like
    "`//`".</p>
     </div>
     <h5 class="heading settled" data-level="4.12.1.4" id="inline-documentation-for-external-scripts"><span class="secno">4.12.1.4. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="script documentation" data-noexport="" id="script-documentation">Inline documentation for external scripts</dfn></span><a class="self-link" href="semantics-scripting.html#inline-documentation-for-external-scripts"></a></h5>
     <p>If a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-92">script</a></code> element’s <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-21">src</a></code> attribute is specified, then the contents of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-93">script</a></code> element, if any, must be such that the value of the <code class="idl"><a data-link-type="idl" href="semantics-scripting.html#dom-htmlscriptelement-text" id="ref-for-dom-htmlscriptelement-text-4">text</a></code> IDL
  attribute, which is derived from the element’s contents, matches the <code>documentation</code> production in
  the following ABNF, the character set for which is Unicode. <a data-link-type="biblio" href="references.html#biblio-abnf">[ABNF]</a></p>
<pre data-highlight="abnf">documentation = *( *( space / tab / comment ) [ line-comment ] newline )
comment       = slash star *( not-star / star not-slash ) 1*star slash
line-comment  = slash slash *not-newline

; characters
tab           = %x0009 ; U+0009 CHARACTER TABULATION (tab)
newline       = %x000A ; U+000A LINE FEED (LF)
space         = %x0020 ; U+0020 SPACE
star          = %x002A ; U+002A ASTERISK (*)
slash         = %x002F ; U+002F SOLIDUS (/)
not-newline   = %x0000-0009 / %x000B-10FFFF
                ; a Unicode character other than U+000A LINE FEED (LF)
not-star      = %x0000-0029 / %x002B-10FFFF
                ; a Unicode character other than U+002A ASTERISK (*)
not-slash     = %x0000-002E / %x0030-10FFFF
                ; a Unicode character other than U+002F SOLIDUS (/)
</pre>
     <p class="note" role="note">This corresponds to putting the contents of the element in JavaScript comments. </p>
     <p class="note" role="note"> This requirement is in addition to the earlier restrictions on the syntax of
  contents of <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-94">script</a></code> elements. </p>
     <div class="example" id="example-1c255d64">
      <a class="self-link" href="semantics-scripting.html#example-1c255d64"></a> This allows authors to include documentation, such as license information or API information,
    inside their documents while still referring to external script files. The syntax is constrained
    so that authors don’t accidentally include what looks like valid script while also providing a <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-src" id="ref-for-element-attrdef-script-src-22">src</a></code> attribute. 
<pre class="highlight"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"cool-effects.js"</span><span class="nt">&gt;</span>
  <span class="c1">// create new instances using:</span>
  <span class="c1">//    var e = new Effect();</span>
  <span class="c1">// start the effect using .play, stop using .stop:</span>
  <span class="c1">//    e.play();</span>
  <span class="c1">//    e.stop();</span>
<span class="nt">&lt;/script&gt;</span>
</pre>
     </div>
     <h5 class="heading settled" data-level="4.12.1.5" id="interaction-of-script-elements-and-xslt"><span class="secno">4.12.1.5. </span><span class="content">Interaction of <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-95">script</a></code> elements and XSLT</span><a class="self-link" href="semantics-scripting.html#interaction-of-script-elements-and-xslt"></a></h5>
     <p><em>This section is non-normative.</em></p>
     <p>This specification does not define how XSLT interacts with the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-96">script</a></code> element.
  However, in the absence of another specification actually defining this, here are some guidelines
  for implementors, based on existing implementations:</p>
     <ul>
      <li data-md="">
       <p>When an XSLT transformation program is triggered by an `&lt;?xml-stylesheet?&gt;` processing
 instruction and the browser implements a direct-to-DOM transformation, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-97">script</a></code> elements
 created by the XSLT processor need to be marked <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-12">"parser-inserted"</a> and run in document
 order (modulo scripts marked <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-defer" id="ref-for-element-attrdef-script-defer-15">defer</a></code> or <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-19">async</a></code>), <a data-link-type="dfn" href="infrastructure.html#immediately" id="ref-for-immediately-9">immediately</a>, as the
 transformation is occurring.</p>
      </li><li data-md="">
       <p>The <code>XSLTProcessor.transformToDocument()</code> method adds elements to a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that
 is not in a <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-75">browsing context</a>, and, accordingly, any <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-98">script</a></code> elements they create need
 to have their <a data-link-type="dfn" href="semantics-scripting.html#already-started" id="ref-for-already-started-3">"already started"</a> flag set in the <a data-link-type="dfn" href="semantics-scripting.html#prepare-a-script" id="ref-for-prepare-a-script-7">prepare a script</a> algorithm and
 never get executed (<a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-5">scripting is disabled</a>). Such <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-99">script</a></code> elements still need to be
 marked <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-13">"parser-inserted"</a>, though, such that their <code class="idl"><a data-link-type="idl" href="semantics-scripting.html#dom-htmlscriptelement-async" id="ref-for-dom-htmlscriptelement-async-3">async</a></code> IDL
 attribute will return false in the absence of an <code><a data-link-type="element-sub" href="semantics-scripting.html#element-attrdef-script-async" id="ref-for-element-attrdef-script-async-20">async</a></code> content attribute.</p>
      </li><li data-md="">
       <p>The <code>XSLTProcessor.transformToFragment()</code> method needs to create a fragment that is
 equivalent to one built manually by creating the elements using <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-document-createelementns">document.createElementNS()</a></code>. For instance, it needs to create <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-100">script</a></code> elements that aren’t <a data-link-type="dfn" href="semantics-scripting.html#parser-inserted" id="ref-for-parser-inserted-14">"parser-inserted"</a> and that don’t have their <a data-link-type="dfn" href="semantics-scripting.html#already-started" id="ref-for-already-started-4">"already started"</a> flag set, so that they will execute when the fragment is <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-18">inserted into a document</a>.</p>
     </li></ul>
     <p>The main distinction between the first two cases and the last case is that the first two
  operate on <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>s and the last operates on a fragment.</p>
     <h4 class="heading settled" data-level="4.12.2" id="the-noscript-element"><span class="secno">4.12.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-noscript"><code>noscript</code></dfn> element</span><a class="self-link" href="semantics-scripting.html#the-noscript-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-108">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-14">Metadata content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-139">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-154">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-107">Contexts in which this element can be used</a>:
      </dt><dd>In a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-34">head</a></code> element of an <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-17">HTML document</a>, if there are no ancestor <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-9">noscript</a></code> elements.
      </dd><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-155">phrasing content</a> is expected in <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-18">HTML documents</a>, if there are no ancestor <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-10">noscript</a></code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-110">Content model</a>:
      </dt><dd>When <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-6">scripting is disabled</a>, in a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-35">head</a></code> element: in any order, zero or more <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-59">link</a></code> elements, zero or more <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-27">style</a></code> elements, and zero or more <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-50">meta</a></code> elements.
      </dd><dd>When <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-7">scripting is disabled</a>, not in a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-36">head</a></code> element: <a data-link-type="dfn" href="dom.html#transparent" id="ref-for-transparent-11">transparent</a>, but there must be no <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-11">noscript</a></code> element descendants.
      </dd><dd>Otherwise: text that conforms to the requirements given in the prose.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-107">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-109">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-108">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-130">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-107">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-107">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-12">noscript</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-172">represents</a> nothing if <a data-link-type="dfn" href="webappapis.html#scripting-was-enabled" id="ref-for-scripting-was-enabled-2">scripting is enabled</a>, and <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-173">represents</a> its children if <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-8">scripting is disabled</a>. It is used to present different
  markup to user agents that support scripting and those that don’t support scripting, by affecting
  how the document is parsed.</p>
     <p>When used in <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-19">HTML documents</a>, the allowed content model is as follows:</p>
     <dl>
      <dt data-md="">
       <p>In a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-37">head</a></code> element, if <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-9">scripting is disabled</a> for the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-13">noscript</a></code> element</p>
      </dt><dd data-md="">
       <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-14">noscript</a></code> element must contain only <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-60">link</a></code>, <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-28">style</a></code>, and <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-51">meta</a></code> elements.</p>
      </dd><dt data-md="">
       <p>In a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-38">head</a></code> element, if <a data-link-type="dfn" href="webappapis.html#scripting-was-enabled" id="ref-for-scripting-was-enabled-3">scripting is enabled</a> for the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-15">noscript</a></code> element</p>
      </dt><dd data-md="">
       <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-16">noscript</a></code> element must contain only text, except that invoking the <a data-link-type="dfn" href="syntax.html#that-algorithm" id="ref-for-that-algorithm-2">HTML fragment parsing algorithm</a> with the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-17">noscript</a></code> element as the <a data-link-type="dfn" href="syntax.html#context" id="ref-for-context-2">context</a> element and the text contents as the <var>input</var> must result in a list of nodes that
  consists only of <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-61">link</a></code>, <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-29">style</a></code>, and <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-52">meta</a></code> elements that would be conforming if they
  were children of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-18">noscript</a></code> element, and no <a data-link-type="dfn" href="syntax.html#parser-parse-error" id="ref-for-parser-parse-error-12">parse errors</a>.</p>
      </dd><dt data-md="">
       <p>Outside of <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-39">head</a></code> elements, if <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-10">scripting is disabled</a> for the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-19">noscript</a></code> element</p>
      </dt><dd data-md="">
       <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-20">noscript</a></code> element’s content model is <a data-link-type="dfn" href="dom.html#transparent" id="ref-for-transparent-12">transparent</a>, with the additional restriction
  that a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-21">noscript</a></code> element must not have a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-22">noscript</a></code> element as an ancestor (that is, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-23">noscript</a></code> can’t be nested).</p>
      </dd><dt data-md="">
       <p>Outside of <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-40">head</a></code> elements, if <a data-link-type="dfn" href="webappapis.html#scripting-was-enabled" id="ref-for-scripting-was-enabled-4">scripting is enabled</a> for the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-24">noscript</a></code> element</p>
      </dt><dd data-md="">
       <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-25">noscript</a></code> element must contain only text, except that the text must be such that running
  the following algorithm results in a <a data-link-type="dfn" href="infrastructure.html#conforming-document" id="ref-for-conforming-document-10">conforming document</a> with
  no <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-26">noscript</a></code> elements and no <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-101">script</a></code> elements, and such that no step in the algorithm
  throws an exception or causes an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-22">HTML parser</a> to flag a <a data-link-type="dfn" href="syntax.html#parser-parse-error" id="ref-for-parser-parse-error-13">parse error</a>:</p>
       <ol>
        <li data-md="">
         <p>Remove every <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-102">script</a></code> element from the document.</p>
        </li><li data-md="">
         <p>Make a list of every <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-27">noscript</a></code> element in the document. For every <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-28">noscript</a></code> element
  in that list, perform the following steps:</p>
         <ol>
          <li data-md="">
           <p>Let <var>s</var> be the concatenation of all the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> node children of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-29">noscript</a></code> element.</p>
          </li><li data-md="">
           <p>Set the <code>outerHTML</code> attribute of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-30">noscript</a></code> element to the value of <var>s</var>. (This, as a side-effect, causes the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-31">noscript</a></code> element to be removed
  from the document.) <a data-link-type="biblio" href="references.html#biblio-dom-parsing">[DOM-Parsing]</a></p>
         </li></ol>
       </li></ol>
     </dd></dl>
     <p class="note" role="note">All these contortions are required because, for historical reasons, the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-32">noscript</a></code> element is handled differently by the <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-23">HTML parser</a> based on whether <a data-link-type="dfn" href="syntax.html#scripting-flag" id="ref-for-scripting-flag-2">scripting was enabled or not</a> when the parser was invoked.</p>
     <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-33">noscript</a></code> element must not be used in <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-14">XML documents</a>.</p>
     <p class="note" role="note">The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-34">noscript</a></code> element is only effective in <a href="syntax.html#syntax">the HTML syntax</a>, it has no effect in <a href="xhtml.html#xhtml">the XHTML syntax</a>.
  This is because the way it works is by essentially "turning off" the parser when scripts are
  enabled, so that the contents of the element are treated as pure text and not as real elements.
  XML does not define a mechanism by which to do this.</p>
     <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-35">noscript</a></code> element has no other requirements. In particular, children of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-36">noscript</a></code> element are not exempt from <a href="sec-forms.html#forms-form-submission">§4.10.22 Form submission</a>, scripting, and so forth, even when <a data-link-type="dfn" href="webappapis.html#scripting-was-enabled" id="ref-for-scripting-was-enabled-5">scripting is enabled</a> for the element.</p>
     <div class="example" id="example-e763aa0b">
      <a class="self-link" href="semantics-scripting.html#example-e763aa0b"></a> In the following example, a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-37">noscript</a></code> element is used to provide fallback for a script. 
<pre class="highlight"><span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">"calcSquare.php"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">x</span><span class="nt">&gt;</span>Number<span class="nt">&lt;/label&gt;</span>:
  <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"x"</span> <span class="na">name=</span><span class="s">"x"</span> <span class="na">type=</span><span class="s">"number"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;script&gt;</span>
  <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'x'</span><span class="p">);</span>
  <span class="kd">var</span> <span class="nx">output</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'p'</span><span class="p">);</span>
  <span class="nx">output</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s1">'Type a number; it will be squared right then!'</span><span class="p">;</span>
  <span class="nx">x</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">output</span><span class="p">);</span>
  <span class="nx">x</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">onsubmit</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span> <span class="p">}</span>
  <span class="nx">x</span><span class="p">.</span><span class="nx">oninput</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">x</span><span class="p">.</span><span class="nx">valueAsNumber</span><span class="p">;</span>
    <span class="nx">output</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">+</span> <span class="s1">' squared is '</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">*</span> <span class="nx">v</span><span class="p">;</span>
  <span class="p">};</span>
  <span class="nt">&lt;/script&gt;</span>
  <span class="nt">&lt;noscript&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">submit</span> <span class="na">value=</span><span class="s">"Calculate Square"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/noscript&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</pre>
      <p>When script is disabled, a button appears to do the calculation on the server side. When
    script is enabled, the value is computed on-the-fly instead.</p>
      <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-38">noscript</a></code> element is a blunt instrument. Sometimes, scripts might be enabled,
    but for some reason the page’s script might fail. For this reason, it’s generally better to avoid
    using <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-39">noscript</a></code>, and to instead design the script to change the page from being a
    scriptless page to a scripted page on the fly, as in the next example:</p>
<pre class="highlight"><span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">"calcSquare.php"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">x</span><span class="nt">&gt;</span>Number<span class="nt">&lt;/label&gt;</span>:
  <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"x"</span> <span class="na">name=</span><span class="s">"x"</span> <span class="na">type=</span><span class="s">"number"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"submit"</span> <span class="na">type=</span><span class="s">submit</span> <span class="na">value=</span><span class="s">"Calculate Square"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;script&gt;</span>
  <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'x'</span><span class="p">);</span>
  <span class="kd">var</span> <span class="nx">output</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'p'</span><span class="p">);</span>
  <span class="nx">output</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s1">'Type a number; it will be squared right then!'</span><span class="p">;</span>
  <span class="nx">x</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">output</span><span class="p">);</span>
  <span class="nx">x</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">onsubmit</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span> <span class="p">}</span>
  <span class="nx">x</span><span class="p">.</span><span class="nx">oninput</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">x</span><span class="p">.</span><span class="nx">valueAsNumber</span><span class="p">;</span>
    <span class="nx">output</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">+</span> <span class="s1">' squared is '</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">*</span> <span class="nx">v</span><span class="p">;</span>
  <span class="p">};</span>
  <span class="kd">var</span> <span class="nx">submit</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'submit'</span><span class="p">);</span>
  <span class="nx">submit</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">submit</span><span class="p">);</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</pre>
      <p>The above technique is also useful in XHTML, since <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-40">noscript</a></code> is not supported in <a href="xhtml.html#xhtml">the XHTML syntax</a>.</p>
     </div>
     <h4 class="heading settled" data-level="4.12.3" id="the-template-element"><span class="secno">4.12.3. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-template"><code>template</code></dfn> element</span><a class="self-link" href="semantics-scripting.html#the-template-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-109">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-15">Metadata content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-140">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-156">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-19">Script-supporting element</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-108">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-16">metadata content</a> is expected.
      </dd><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-157">phrasing content</a> is expected.
      </dd><dd>Where <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-20">script-supporting elements</a> are expected.
      </dd><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-29">colgroup</a></code> element that doesn’t have a <code>span</code> attribute.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-111">Content model</a>:
      </dt><dd>Either: <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-17">Metadata content</a>.
      </dd><dd>Or: <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-141">Flow content</a>.
      </dd><dd>Or: The content model of <code>ol</code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-14">ul</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-23">dl</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-33">figure</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-29">ruby</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-74">object</a></code> elements.
      </dd><dd>Or: The content model of <code>video</code> and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-24">audio</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-74">table</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-30">colgroup</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-41">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-41">tbody</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-41">tfoot</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-58">tr</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-34">fieldset</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-100">select</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-17">details</a></code> elements.
      </dd><dd>Or: The content model of <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-38">menu</a></code> elements whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-popup-menu" id="ref-for-statedef-menu-popup-menu-14">popup menu</a> state.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-108">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-110">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-109">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-131">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-108">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTemplateElement" data-dfn-type="interface" data-export="" id="htmltemplateelement-htmltemplateelement">HTMLTemplateElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-108">HTMLElement</a> {
  <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DocumentFragment" href="semantics-scripting.html#dom-htmltemplateelement-content" id="ref-for-dom-htmltemplateelement-content-1">content</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-10">template</a></code> element is used to declare fragments of HTML that can be cloned and
  inserted in the document by script.</p>
     <p class="note" role="note"> Templates provide a method for declaring inert DOM subtrees and manipulating them to
  instantiate document fragments with identical contents. </p>
     <p class="note" role="note"> When web pages dynamically alter the contents of their documents (e.g., in response to user
  interaction or new data arriving from the server), it is common that they require fragments of
  HTML which may require further modification before use, such as the insertion of values
  appropriate for the usage context. </p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-11">template</a></code> element allows for the declaration of document fragments which are
  unused by the document when loaded, but are parsed as HTML and are available at runtime for use by
  the web page. </p>
     <p>In a rendering, the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-12">template</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-174">represents</a> nothing.</p>
     <dl class="domintro">
      <dt><var>template</var> . <code>content</code>
      </dt><dd>
       <p>Returns the contents of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-13">template</a></code>, which are stored in a <code>DocumentFragment</code> associated with a different <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> so as to avoid
    the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-14">template</a></code> contents interfering with the main <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. (For
    example, this avoids form controls from being submitted, scripts from executing, and so
    forth.)</p>
     </dd></dl>
     <div class="impl">
      <p>Each <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-15">template</a></code> element has an associated <code>DocumentFragment</code> object that
  is its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="template-contents">template contents</dfn>. When a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-16">template</a></code> element is created, the user
  agent must run the following steps to establish the <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-2">template contents</a>:</p>
      <ol>
       <li>Let <var>doc</var> be the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-17">template</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="semantics-scripting.html#appropriate-template-contents-owner-document" id="ref-for-appropriate-template-contents-owner-document-1">appropriate template contents owner
    document</a>.
       </li><li>Create a <code>DocumentFragment</code> object whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> is <var>doc</var>.
       </li><li>Set the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-18">template</a></code> element’s <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-3">template contents</a> to the newly
    created <code>DocumentFragment</code> object.
      </li></ol>
      <p>A <code>Document</code> <var>doc</var>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="appropriate template contents owner document" data-noexport="" id="appropriate-template-contents-owner-document">appropriate template contents owner
  document</dfn> is the <code>Document</code> returned by the following algorithm:</p>
      <ol>
       <li>
        <p>If <var>doc</var> is not a <code>Document</code> created by this algorithm, run
    these substeps:</p>
        <ol>
         <li>
          <p>If <var>doc</var> does not yet have an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="associated-inert-template-document">associated inert template document</dfn> then run
      these substeps:</p>
          <ol>
           <li>Let <var>new doc</var> be a new <code>Document</code> (that does not have a <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-76">browsing context</a>). This is "a <code>Document</code> created by this algorithm"
        for the purposes of the step above.
           </li><li>If <var>doc</var> is an <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-20">HTML document</a>, mark <var>new doc</var> as an <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-21">HTML document</a> also.
           </li><li>Let <var>doc</var>’s <a data-link-type="dfn" href="semantics-scripting.html#associated-inert-template-document" id="ref-for-associated-inert-template-document-1">associated inert template document</a> be <var>new doc</var>.
          </li></ol>
         </li><li>Set <var>doc</var> to <var>doc</var>’s <a data-link-type="dfn" href="semantics-scripting.html#associated-inert-template-document" id="ref-for-associated-inert-template-document-2">associated inert template document</a>.
        </li></ol>
        <p class="note" role="note"> Each <code>Document</code> not created by this algorithm thus gets a single <code>Document</code> to act as its proxy for owning the <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-4">template contents</a> of all
    its <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-19">template</a></code> elements, so that they aren’t in a <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-77">browsing context</a> and
    thus remain inert (e.g., scripts do not run). Meanwhile, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-20">template</a></code> elements inside <code>Document</code> objects that <em>are</em> created by this algorithm just reuse the same <code>Document</code> owner for their contents. </p>
       </li><li>Return <var>doc</var>.
      </li></ol>
      <p>The <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-adopt-ext">adopting steps</a> (with <var>node</var> and <var>oldDocument</var> as parameters) for <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-21">template</a></code> elements
  are the following:</p>
      <ol>
       <li>
        <p>Let <var>doc</var> be <var>node</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="semantics-scripting.html#appropriate-template-contents-owner-document" id="ref-for-appropriate-template-contents-owner-document-2">appropriate template contents owner document</a>.</p>
        <p class="note" role="note"><var>node</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> is the <code>Document</code> object
    that <var>node</var> was just adopted <em>into</em>.</p>
       </li><li><a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-adopt">Adopt</a> <var>node</var>’s <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-5">template contents</a> (a <code>DocumentFragment</code> object) into <var>doc</var>.
      </li></ol>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTemplateElement" data-dfn-type="attribute" data-export="" id="dom-htmltemplateelement-content"><code>content</code></dfn> IDL attribute must return
  the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-22">template</a></code> element’s <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-6">template contents</a>.</p>
      <hr>
      <p>The <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-clone-ext">cloning steps</a> for a <code>template</code> element <var>node</var> being cloned to a copy <var>copy</var> must run the
  following steps:</p>
      <ol>
       <li>If the <var>clone children flag</var> is not set in the calling <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-clone">clone</a> algorithm, abort these steps.
       </li><li>Let <var>copied contents</var> be the result of <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-clone">cloning</a> all the children of <var>node</var>’s <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-7">template contents</a>, with <var>document</var> set to <var>copy</var>’s <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-8">template contents</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node
    document</a>, and with the <var>clone children
    flag</var> set.
       </li><li>Append <var>copied contents</var> to <var>copy</var>’s <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-9">template contents</a>.
      </li></ol>
     </div>
     <div class="example" id="example-4cc708e6">
      <a class="self-link" href="semantics-scripting.html#example-4cc708e6"></a> In this example, a script populates a table four-column with data from a data structure, using
    a <code>template</code> to provide the element structure instead of manually generating the
    structure from markup. 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;title&gt;</span>Cat data<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script&gt;</span>
  <span class="c1">// Data is hard-coded here, but could come from the server</span>
  <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[</span>
    <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Pillar'</span><span class="p">,</span> <span class="nx">color</span><span class="o">:</span> <span class="s1">'Ticked Tabby'</span><span class="p">,</span> <span class="nx">sex</span><span class="o">:</span> <span class="s1">'Female (neutered)'</span><span class="p">,</span> <span class="nx">legs</span><span class="o">:</span> <span class="mi">3</span> <span class="p">},</span>
    <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Hedral'</span><span class="p">,</span> <span class="nx">color</span><span class="o">:</span> <span class="s1">'Tuxedo'</span><span class="p">,</span> <span class="nx">sex</span><span class="o">:</span> <span class="s1">'Male (neutered)'</span><span class="p">,</span> <span class="nx">legs</span><span class="o">:</span> <span class="mi">4</span> <span class="p">},</span>
  <span class="p">];</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span>Name <span class="nt">&lt;th&gt;</span>Color <span class="nt">&lt;th&gt;</span>Sex <span class="nt">&lt;th&gt;</span>Legs
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;template</span> <span class="na">id=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;tr&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;</span>
  <span class="nt">&lt;/template&gt;</span>
<span class="nt">&lt;/table&gt;</span>
<span class="nt">&lt;script&gt;</span>
  <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#row'</span><span class="p">);</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">cat</span> <span class="o">=</span> <span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
    <span class="kd">var</span> <span class="nx">clone</span> <span class="o">=</span> <span class="nx">template</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">cells</span> <span class="o">=</span> <span class="nx">clone</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'td'</span><span class="p">);</span>
    <span class="nx">cells</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">cat</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
    <span class="nx">cells</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">cat</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
    <span class="nx">cells</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">cat</span><span class="p">.</span><span class="nx">sex</span><span class="p">;</span>
    <span class="nx">cells</span><span class="p">[</span><span class="mi">3</span><span class="p">].</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">cat</span><span class="p">.</span><span class="nx">legs</span><span class="p">;</span>
    <span class="nx">template</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">clone</span><span class="p">);</span>
  <span class="p">}</span>
<span class="nt">&lt;/script&gt;</span>
</pre>
      <p>This example uses <code>cloneNode()</code> on the <code>template</code>’s contents; it could
    equivalently have used <code>document.importNode()</code>, which does the same thing. The only
    difference between these two APIs is when the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> is updated: with <code>cloneNode()</code> it is updated when the nodes are appended with <code>appendChild()</code>, with <code>document.importNode()</code> it is updated when the nodes
    are cloned.</p>
     </div>
     <div class="impl">
      <h5 class="heading settled" data-level="4.12.3.1" id="interaction-of-template-elements-with-xslt-and-xpath"><span class="secno">4.12.3.1. </span><span class="content">Interaction of <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-23">template</a></code> elements with XSLT and XPath</span><a class="self-link" href="semantics-scripting.html#interaction-of-template-elements-with-xslt-and-xpath"></a></h5>
      <p><em>This section is non-normative.</em></p>
      <p>This specification does not define how XSLT and XPath interact with the <code>template</code> element. However, in the absence of another specification actually defining this, here are some
  guidelines for implementors, which are intended to be consistent with other processing described
  in this specification:</p>
      <ul>
       <li>An XSLT processor based on an XML parser that acts as described
    in this specification needs to act as if <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-24">template</a></code> elements contain as
    descendants their <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-10">template contents</a> for the purposes of the transform.
       </li><li>An XSLT processor that outputs a DOM needs to ensure that nodes that would go into a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-25">template</a></code> element are instead placed into the element’s <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-11">template
    contents</a>.
       </li><li>XPath evaluation using the XPath DOM API when applied to a <code>Document</code> parsed
    using the <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-24">HTML parser</a> or the <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-18">XML parser</a> described in this specification
    needs to ignore <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-12">template contents</a>. 
      </li></ul>
     </div>
     <h4 class="heading settled" data-level="4.12.4" id="the-canvas-element"><span class="secno">4.12.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-canvas"><code>canvas</code></dfn> element</span><a class="self-link" href="semantics-scripting.html#the-canvas-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-110">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-142">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-158">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-20">Embedded content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-67">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-109">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-21">embedded content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-112">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#transparent" id="ref-for-transparent-13">Transparent</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-109">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-111">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-110">Global attributes</a>
      </dd><dd><code>width</code> - Horizontal dimension
      </dd><dd><code>height</code> - Vertical dimension
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-132">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-109">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">typedef</span> (<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/2dcontext/#canvasrenderingcontext2d">CanvasRenderingContext2D</a> <span class="kt">or</span> <a class="n" data-link-type="idl-name" href="https://www.khronos.org/registry/webgl/specs/1.0/#WEBGLRENDERINGCONTEXT">WebGLRenderingContext</a>) <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="typedef" data-export="" id="typedefdef-htmlcanvaselement-renderingcontext">RenderingContext</dfn>;

<span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="interface" data-export="" id="htmlcanvaselement-htmlcanvaselement">HTMLCanvasElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-109">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">unsigned</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-type="unsigned long" href="semantics-scripting.html#dom-htmlcanvaselement-width" id="ref-for-dom-htmlcanvaselement-width-1">width</a>;
  <span class="kt">attribute</span> <span class="kt">unsigned</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-type="unsigned long" href="semantics-scripting.html#dom-htmlcanvaselement-height" id="ref-for-dom-htmlcanvaselement-height-1">height</a>;

  <a class="n" data-link-type="idl-name" href="semantics-scripting.html#typedefdef-htmlcanvaselement-renderingcontext" id="ref-for-typedefdef-htmlcanvaselement-renderingcontext-1">RenderingContext</a>? <a class="nv idl-code" data-link-type="method" href="semantics-scripting.html#dom-htmlcanvaselement-getcontext" id="ref-for-dom-htmlcanvaselement-getcontext-1">getContext</a>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/getContext(contextId, arguments...), HTMLCanvasElement/getContext(contextId, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-getcontext-contextid-arguments-contextid">contextId<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-getcontext-contextid-arguments-contextid"></a></dfn>, <span class="kt">any</span>... <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/getContext(contextId, arguments...), HTMLCanvasElement/getContext(contextId, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-getcontext-contextid-arguments-arguments">arguments<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-getcontext-contextid-arguments-arguments"></a></dfn>);
  <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="method" href="semantics-scripting.html#dom-htmlcanvaselement-probablysupportscontext" id="ref-for-dom-htmlcanvaselement-probablysupportscontext-1">probablySupportsContext</a>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/probablySupportsContext(contextId, arguments...), HTMLCanvasElement/probablySupportsContext(contextId, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-probablysupportscontext-contextid-arguments-contextid">contextId<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-probablysupportscontext-contextid-arguments-contextid"></a></dfn>, <span class="kt">any</span>... <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/probablySupportsContext(contextId, arguments...), HTMLCanvasElement/probablySupportsContext(contextId, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-probablysupportscontext-contextid-arguments-arguments">arguments<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-probablysupportscontext-contextid-arguments-arguments"></a></dfn>);

  <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="method" data-export="" data-lt="toDataURL(type, arguments...)|toDataURL(type)|toDataURL()" id="dom-htmlcanvaselement-todataurl">toDataURL<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-todataurl"></a></dfn>(<span class="kt">optional</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/toDataURL(type, arguments...), HTMLCanvasElement/toDataURL(type, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-todataurl-type-arguments-type">type<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-todataurl-type-arguments-type"></a></dfn>, <span class="kt">any</span>... <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/toDataURL(type, arguments...), HTMLCanvasElement/toDataURL(type, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-todataurl-type-arguments-arguments">arguments<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-todataurl-type-arguments-arguments"></a></dfn>);
  <span class="kt">void</span> <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="method" data-export="" data-lt="toBlob(_callback, type, arguments...)|toBlob(_callback, type)|toBlob(_callback)" id="dom-htmlcanvaselement-toblob">toBlob<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-toblob"></a></dfn>(<a class="n" data-link-type="idl-name" href="semantics-scripting.html#callbackdef-htmlcanvaselement-blobcallback" id="ref-for-callbackdef-htmlcanvaselement-blobcallback-1">BlobCallback</a> <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/toBlob(_callback, type, arguments...), HTMLCanvasElement/toBlob(_callback, type, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-toblob-_callback-type-arguments-_callback">_callback<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-toblob-_callback-type-arguments-_callback"></a></dfn>, <span class="kt">optional</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/toBlob(_callback, type, arguments...), HTMLCanvasElement/toBlob(_callback, type, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-toblob-_callback-type-arguments-type">type<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-toblob-_callback-type-arguments-type"></a></dfn>, <span class="kt">any</span>... <dfn class="nv idl-code" data-dfn-for="HTMLCanvasElement/toBlob(_callback, type, arguments...), HTMLCanvasElement/toBlob(_callback, type, arguments)" data-dfn-type="argument" data-export="" id="dom-htmlcanvaselement-toblob-_callback-type-arguments-arguments">arguments<a class="self-link" href="semantics-scripting.html#dom-htmlcanvaselement-toblob-_callback-type-arguments-arguments"></a></dfn>);
};

<span class="kt">callback</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="callback" data-export="" id="callbackdef-htmlcanvaselement-blobcallback">BlobCallback</dfn> = <span class="kt">void</span> (<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/FileAPI/#dfn-Blob">Blob</a>? <dfn class="nv idl-code" data-dfn-for="BlobCallback" data-dfn-type="argument" data-export="" id="dom-blobcallback-blob">blob<a class="self-link" href="semantics-scripting.html#dom-blobcallback-blob"></a></dfn>);
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-9">canvas</a></code> element provides scripts with a resolution-dependent bitmap canvas,
  which can be used for rendering graphs, game graphics, art, or other visual images on the fly.</p>
     <p>Authors should not use the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-10">canvas</a></code> element in a document when a more suitable
  element is available. For example, it is inappropriate to use a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-11">canvas</a></code> element to
  render a page heading: if the desired presentation of the heading is graphically intense, it
  should be marked up using appropriate elements (typically <code>h1</code>) and then styled using
  CSS and supporting technologies such as Web Components.</p>
     <p>When authors use the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-12">canvas</a></code> element, they must also provide content that, when
  presented to the user, conveys essentially the same function or purpose as the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-13">canvas</a></code>'s bitmap. This content may be placed as content of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-14">canvas</a></code> element. The contents of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-15">canvas</a></code> element, if any, are the element’s <a data-link-type="dfn" href="dom.html#fallback-content" id="ref-for-fallback-content-15">fallback
  content</a>.</p>
     <hr>
     <p>In interactive visual media, if <a data-link-type="dfn" href="webappapis.html#scripting-was-enabled" id="ref-for-scripting-was-enabled-6">scripting is enabled</a> for
  the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-16">canvas</a></code> element, and if support for <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-17">canvas</a></code> elements has been enabled,
  the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-18">canvas</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-175">represents</a> <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-22">embedded content</a> consisting
  of a dynamically created image, the element’s bitmap.</p>
     <p>In non-interactive, static, visual media, if the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-19">canvas</a></code> element has been
  previously associated with a rendering context (e.g., if the page was viewed in an interactive
  visual medium and is now being printed, or if some script that ran during the page layout process
  painted on the element), then the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-20">canvas</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-176">represents</a> <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-23">embedded content</a> with the element’s current bitmap and size. Otherwise, the element
  represents its <a data-link-type="dfn" href="dom.html#fallback-content" id="ref-for-fallback-content-16">fallback content</a> instead.</p>
     <p>In non-visual media, and in visual media if <a data-link-type="dfn" href="webappapis.html#scripting-is-disabled" id="ref-for-scripting-is-disabled-11">scripting is
  disabled</a> for the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-21">canvas</a></code> element or if support for <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-22">canvas</a></code> elements
  has been disabled, the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-23">canvas</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-177">represents</a> its <a data-link-type="dfn" href="dom.html#fallback-content" id="ref-for-fallback-content-17">fallback
  content</a> instead.</p>
     <p>When a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-24">canvas</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-178">represents</a> <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-24">embedded content</a>, the
  user can still focus descendants of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-25">canvas</a></code> element (in the <a data-link-type="dfn" href="dom.html#fallback-content" id="ref-for-fallback-content-18">fallback
  content</a>). When an element is <a data-link-type="dfn" href="editing.html#focused" id="ref-for-focused-6">focused</a>, it is the target of keyboard interaction
  events (even though the element itself is not visible). This allows authors to make an interactive
  canvas keyboard-accessible: authors should have a one-to-one mapping of interactive regions to <i>focusable areas</i> in the <a data-link-type="dfn" href="dom.html#fallback-content" id="ref-for-fallback-content-19">fallback content</a>. (Focus has no
  effect on mouse interaction events.) <a data-link-type="biblio" href="references.html#biblio-uievents">[UIEVENTS]</a></p>
     <p>An element whose nearest <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-26">canvas</a></code> element ancestor is <a data-link-type="dfn" href="rendering.html#being-rendered" id="ref-for-being-rendered-12">being rendered</a> and <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-179">represents</a> <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-25">embedded content</a> is an element that is <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="being used as relevant canvas fallback content" data-noexport="" id="being-used-as-relevant-canvas-fallback-content">being used as
  relevant canvas fallback content</dfn>.</p>
     <hr>
     <p>The <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-27">canvas</a></code> element has two attributes to control the size of the element’s bitmap: <dfn class="dfn-paneled" data-dfn-for="canvas" data-dfn-type="element-attr" data-export="" id="element-attrdef-canvas-width"><code>width</code></dfn> and <dfn class="dfn-paneled" data-dfn-for="canvas" data-dfn-type="element-attr" data-export="" id="element-attrdef-canvas-height"><code>height</code></dfn>. These attributes, when specified, must have
  values that are <a data-link-type="dfn" href="infrastructure.html#valid-non-negative-integer" id="ref-for-valid-non-negative-integer-22">valid non-negative integers</a>. <span class="impl">The <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-19">rules for parsing non-negative integers</a> must be used to obtain their
  numeric values. If an attribute is missing, or if parsing its value returns an error, then the
  default value must be used instead.</span> The <code>width</code> attribute defaults to 300, and the <code>height</code> attribute
  defaults to 150.</p>
     <p>The <a data-link-type="dfn" href="infrastructure.html#intrinsic-dimensions" id="ref-for-intrinsic-dimensions-10">intrinsic dimensions</a> of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-28">canvas</a></code> element when it <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-180">represents</a> <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-26">embedded content</a> are equal to the dimensions of the
  element’s bitmap.</p>
     <p>The user agent must use a square pixel density consisting of one pixel of image data per
  coordinate space unit for the bitmaps of a <code>canvas</code> and its rendering contexts.</p>
     <p class="note" role="note"> A <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-29">canvas</a></code> element can be sized arbitrarily by a style sheet, its
  bitmap is then subject to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css4-images/#object-fit">object-fit</a> CSS property. <a data-link-type="biblio" href="references.html#biblio-css3-images">[CSS3-IMAGES]</a> </p>
     <div class="impl">
      <hr>
      <p>The bitmaps of <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-30">canvas</a></code> elements, the bitmaps of <code>ImageBitmap</code> objects,
  as well as some of the bitmaps of rendering contexts, such as those described in the section on
  the <code>CanvasRenderingContext2D</code> object below, have an <dfn class="dfn-paneled" data-dfn-for="canvas" data-dfn-type="dfn" data-noexport="" id="canvas-origin-clean">origin-clean</dfn> flag, which can be set to true or false.
  Initially, when the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-31">canvas</a></code> element or <code>ImageBitmap</code> object is created,
  its bitmap’s <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-1">origin-clean</a> flag must be set to
  true.</p>
      <p>A <code>canvas</code> bitmap can also have a hit region list, as described in the <code>CanvasRenderingContext2D</code> section below.</p>
      <p>A <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-32">canvas</a></code> element can have a rendering context bound to it. Initially, it does not
  have a bound rendering context. To keep track of whether it has a rendering context or not, and
  what kind of rendering context it is, a <code>canvas</code> also has a <dfn class="dfn-paneled" data-dfn-for="canvas" data-dfn-type="mode" data-export="" data-lt="context mode|canvas context mode" id="modedef-canvas-context-mode">canvas context mode</dfn>,
  which is initially <dfn class="dfn-paneled" data-dfn-for="canvas" data-dfn-type="context" data-export="" id="contextdef-canvas-none">none</dfn> but can be changed to either <dfn class="dfn-paneled" data-dfn-for="canvas" data-dfn-type="context" data-export="" id="contextdef-canvas-2d">2d</dfn>, <dfn class="dfn-paneled" data-dfn-for="canvas" data-dfn-type="context" data-export="" id="contextdef-canvas-webgl">webgl</dfn> by algorithms
  defined in this specification.</p>
      <p>When its <a data-link-type="mode" href="semantics-scripting.html#modedef-canvas-context-mode" id="ref-for-modedef-canvas-context-mode-1">canvas context mode</a> is <a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-none" id="ref-for-contextdef-canvas-none-1">none</a>, a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-33">canvas</a></code> element has no rendering context,
  and its bitmap must be fully transparent black with an <a data-link-type="dfn" href="infrastructure.html#css-intrinsic-width" id="ref-for-css-intrinsic-width-8">intrinsic width</a> equal to the numeric value
  of the element’s <code>width</code> attribute and an <a data-link-type="dfn" href="infrastructure.html#css-intrinsic-height" id="ref-for-css-intrinsic-height-6">intrinsic height</a> equal to the numeric value of the element’s <code>height</code> attribute, those values being interpreted in CSS pixels, and being updated as the attributes are
  set, changed, or removed.</p>
      <p>When a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-34">canvas</a></code> element represents <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-27">embedded content</a>, it <a data-link-type="dfn" href="infrastructure.html#provides-a-paint-source" id="ref-for-provides-a-paint-source-3">provides
  a paint source</a> whose width is the element’s <a data-link-type="dfn" href="infrastructure.html#css-intrinsic-width" id="ref-for-css-intrinsic-width-9">intrinsic width</a>, whose height is
  the element’s <a data-link-type="dfn" href="infrastructure.html#css-intrinsic-height" id="ref-for-css-intrinsic-height-7">intrinsic height</a>, and whose appearance is the element’s bitmap.</p>
      <p>Whenever the <code>width</code> and <code>height</code> content attributes are set, removed, changed, or
  redundantly set to the value they already have, if the <a data-link-type="mode" href="semantics-scripting.html#modedef-canvas-context-mode" id="ref-for-modedef-canvas-context-mode-2">canvas context mode</a> is <a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-2d" id="ref-for-contextdef-canvas-2d-1">2d</a>, the user agent must set bitmap dimensions to the numeric values of
  the <code>width</code> and <code>height</code> content attributes.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="attribute" data-export="" id="dom-htmlcanvaselement-width"><code>width</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="attribute" data-export="" id="dom-htmlcanvaselement-height"><code>height</code></dfn> IDL attributes must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-115">reflect</a> the
  respective content attributes of the same name, with the same defaults.</p>
     </div>
     <hr>
     <dl class="domintro">
      <dt><var>context</var> = <var>canvas</var> . <code>getContext</code>(<var>contextId</var> [, ... ] )
      </dt><dd>
       <p>Returns an object that exposes an API for drawing on the canvas. The first argument specifies
    the desired API, either "<code>2d</code>" or "<code>webgl</code>". Subsequent arguments are handled by that API.</p>
       <p>The list of defined contexts is given on the <a data-link-type="dfn" href="https://wiki.whatwg.org/wiki/CanvasContexts#content">WHATWG Wiki CanvasContexts page</a>. <a data-link-type="biblio" href="references.html#biblio-whatwgwiki">[WHATWGWIKI]</a></p>
       <p>Example contexts are the "<code>2d</code>" <a data-link-type="biblio" href="references.html#biblio-canvas-2d">[CANVAS-2D]</a> and the "<code>webgl</code>" context <a data-link-type="biblio" href="references.html#biblio-webgl">[WEBGL]</a>.</p>
       <p>Returns null if the given context ID is not supported or if the canvas has already been
    initialized with some other (incompatible) context type (e.g., trying to get a "<code>2d</code>" context after getting a "<code>webgl</code>" context).</p>
      </dd><dt><var>supported</var> = <var>canvas</var> . <code>probablySupportsContext</code>(<var>contextId</var> [, ... ] )
      </dt><dd>
       <p>Returns false if calling <code>getContext()</code> with the
    same arguments would definitely return null, and true otherwise.</p>
       <p>This return value is not a guarantee that <code>getContext()</code> will or will not return an object, as
    conditions (e.g., availability of system resources) can vary over time.</p>
     </dd></dl>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="method" data-export="" data-lt="getContext(contextId, arguments...)|getContext(contextId, arguments)" id="dom-htmlcanvaselement-getcontext"><code>getContext(<var>contextId</var>, <var>arguments...</var>)</code></dfn> method of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-35">canvas</a></code> element, when invoked,
  must run the steps in the cell of the following table whose column header describes the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-36">canvas</a></code> element’s <a data-link-type="mode" href="semantics-scripting.html#modedef-canvas-context-mode" id="ref-for-modedef-canvas-context-mode-3">canvas context mode</a> and whose row header describes the method’s first argument.</p>
     <table class="data">
      <caption>getContext() invocation steps</caption>
      <thead>
       <tr>
        <td>
        </td><th><a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-none" id="ref-for-contextdef-canvas-none-2">none</a> 
        </th><th><a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-2d" id="ref-for-contextdef-canvas-2d-2">2d</a> 
        </th><th><a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-webgl" id="ref-for-contextdef-canvas-webgl-1">webgl</a> 
      </th></tr></thead><tbody>
       <tr>
        <th>"<dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="2d"><code>2d</code></dfn>" 
        </th><td>
         <p>Set the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-37">canvas</a></code> element’s <a data-link-type="mode" href="semantics-scripting.html#modedef-canvas-context-mode" id="ref-for-modedef-canvas-context-mode-4">context mode</a> to <a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-2d" id="ref-for-contextdef-canvas-2d-3">2d</a>, obtain a <code>CanvasRenderingContext2D</code> object as defined in the HTML Canvas 2D Context
      specification <a data-link-type="biblio" href="references.html#biblio-canvas-2d">[CANVAS-2D]</a>, set the obtained <code>CanvasRenderingContext2D</code> object’s <a data-link-type="mode" href="semantics-scripting.html#modedef-canvas-context-mode" id="ref-for-modedef-canvas-context-mode-5">context mode</a> to <a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-2d" id="ref-for-contextdef-canvas-2d-4">2d</a>, and return the <code>CanvasRenderingContext2D</code> object</p>
        </td><td> Return the same object as was return the last time the method was invoked with this same
      first argument. 
        </td><td> Return null. 
       </td></tr><tr>
        <th>"<dfn data-dfn-type="dfn" data-noexport="" id="webgl"><code>webgl</code><a class="self-link" href="semantics-scripting.html#webgl"></a></dfn>", if the user agent supports the WebGL feature in its current configuration 
        </th><td> Follow the instructions given in the WebGL specification’s <i>Context Creation</i> section to
      obtain either a <code>WebGLRenderingContext</code> or null; if the returned value is null,
      then return null and abort these steps, otherwise, set the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-38">canvas</a></code> element’s <a data-link-type="mode" href="semantics-scripting.html#modedef-canvas-context-mode" id="ref-for-modedef-canvas-context-mode-6">context mode</a> to <a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-webgl" id="ref-for-contextdef-canvas-webgl-2">webgl</a>, set the new <code>WebGLRenderingContext</code> object’s <a data-link-type="mode" href="semantics-scripting.html#modedef-canvas-context-mode" id="ref-for-modedef-canvas-context-mode-7">context mode</a> to <a data-link-type="context" href="semantics-scripting.html#contextdef-canvas-webgl" id="ref-for-contextdef-canvas-webgl-3">webgl</a>, and return the <code>WebGLRenderingContext</code> object‡ <a data-link-type="biblio" href="references.html#biblio-webgl">[WEBGL]</a> 
        </td><td> Return null. 
        </td><td> Return the same object as was return the last time the method was invoked with this same
      first argument. 
       </td></tr><tr>
        <th>A vendor-specific extension* 
        </th><td> Behave as defined for the extension. 
        </td><td> Behave as defined for the extension. 
        </td><td> Behave as defined for the extension. 
       </td></tr><tr>
        <th>An unsupported value† 
        </th><td> Return null. 
        </td><td> Return null. 
        </td><td> Return null. 
     </td></tr></tbody></table>
     <p><small>* Vendors may define experimental contexts using the syntax <code><var>vendorname</var>-<var>context</var></code>, for example, <code>moz-3d</code>.</small></p>
     <p><small>† For example, the "<code>webgl</code>" value in the case of a user agent having exhausted the
  graphics hardware’s abilities and having no software fallback implementation.</small></p>
     <p><small>‡ The second (and subsequent) argument(s) to the method, if
  any, are ignored in all cases except this one. See the WebGL specification for
  details.</small></p>
     <hr>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLCanvasElement" data-dfn-type="method" data-export="" data-lt="probablySupportsContext(contextId, arguments...)|probablySupportsContext(contextId, arguments)" id="dom-htmlcanvaselement-probablysupportscontext"><code>probablySupportsContext(<var>contextId</var>, <var>arguments...</var>)</code></dfn> method of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-39">canvas</a></code> element, when
  invoked, must return false if calling <code>getContext()</code> on
  the same object and with the same arguments would definitely return null at this time, and true
  otherwise.</p>
     <hr>
     <dl class="domintro">
      <dt><var>url</var> = <var>canvas</var> . <code>toDataURL</code>( [ <var>type</var>, ... ] )
      </dt><dd>
       <p>Returns a <a data-link-type="scheme" href="infrastructure.html#schemedef-data-url" id="ref-for-schemedef-data-url-6"><code>data:</code> URL</a> for the image in the
    canvas.</p>
       <p>The first argument, if provided, controls the type of the image to be returned (e.g., PNG or
    JPEG). The default is <code>image/png</code>; that type is also used if the given type
    isn’t supported. The other arguments are specific to the type, and control the way that the
    image is generated, as given in the table below.</p>
       <p>When trying to use types other than "<code>image/png</code>", authors can check if the image
    was really returned in the requested format by checking to see if the returned string starts
    with one of the exact strings "<code>data:image/png,</code>" or "<code>data:image/png;</code>". If it does, the image is PNG, and thus the requested type was
    not supported. (The one exception to this is if the canvas has either no height or no width, in
    which case the result might simply be "<code>data:,</code>".)</p>
      </dd><dt><var>canvas</var> . <code>toBlob</code>(<var>callback</var> [, <var>type</var>, ... ] )
      </dt><dd>
       <p>Creates a <code>Blob</code> object representing a file containing the image in the canvas,
    and invokes a callback with a handle to that object.</p>
       <p>The second argument, if provided, controls the type of the image to be returned (e.g., PNG or
    JPEG). The default is <code>image/png</code>; that type is also used if the given type
    isn’t supported. The other arguments are specific to the type, and control the way that the
    image is generated, as given in the table below.</p>
     </dd></dl>
     <div class="impl">
      <p>The <dfn class="css" data-dfn-type="function" data-export="" id="funcdef-todataurl"><code>toDataURL()</code><a class="self-link" href="semantics-scripting.html#funcdef-todataurl"></a></dfn> method must run the
  following steps:</p>
      <ol>
       <li>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-40">canvas</a></code> element’s bitmap’s <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-2">origin-clean</a> flag is set to false, throw a
    "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code> and abort these steps. 
       </li><li>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-41">canvas</a></code> element’s bitmap has no pixels (i.e., either its horizontal
    dimension or its vertical dimension is zero) then return the string "<code>data:,</code>" and abort these steps. (This is the shortest <a data-link-type="scheme" href="infrastructure.html#schemedef-data-url" id="ref-for-schemedef-data-url-7"><code>data:</code> URL</a>; it represents the empty string in a <code>text/plain</code> resource.)
       </li><li>Let <var>file</var> be <a data-link-type="dfn" href="semantics-scripting.html#a-serialization-of-the-canvas-elements-bitmap-as-a-file" id="ref-for-a-serialization-of-the-canvas-elements-bitmap-as-a-file-1">a serialization of the <code>canvas</code> element’s bitmap as a file</a>, using the method’s
    arguments (if any) as the <var>arguments</var>.
       </li><li>Return a <a data-link-type="scheme" href="infrastructure.html#schemedef-data-url" id="ref-for-schemedef-data-url-8"><code>data:</code> URL</a> representing <var>file</var>. <a data-link-type="biblio" href="references.html#biblio-rfc2397">[RFC2397]</a> 
      </li></ol>
      <p>The <dfn class="css" data-dfn-type="function" data-export="" id="funcdef-toblob"><code>toBlob()</code><a class="self-link" href="semantics-scripting.html#funcdef-toblob"></a></dfn> method must run the following
  steps:</p>
      <ol>
       <li>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-42">canvas</a></code> element’s bitmap’s <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-3">origin-clean</a> flag is set to false, throw a
    "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code> and abort these steps. 
       </li><li>Let <var>callback</var> be the first argument.
       </li><li>Let <var>arguments</var> be the second and subsequent arguments to the method, if
    any.
       </li><li>
        <p>If the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-43">canvas</a></code> element’s bitmap has no pixels (i.e., either its horizontal
    dimension or its vertical dimension is zero) then let <var>result</var> be null.</p>
        <p>Otherwise, let <var>result</var> be a <code>Blob</code> object representing <a data-link-type="dfn" href="semantics-scripting.html#a-serialization-of-the-canvas-elements-bitmap-as-a-file" id="ref-for-a-serialization-of-the-canvas-elements-bitmap-as-a-file-2">a serialization of the <code>canvas</code> element’s
    bitmap as a file</a>, using <var>arguments</var>. <a data-link-type="biblio" href="references.html#biblio-fileapi">[FILEAPI]</a></p>
       </li><li>Return, but continue running these steps <a data-link-type="dfn" href="infrastructure.html#in-parallel" id="ref-for-in-parallel-26">in parallel</a>.
       </li><li><a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-113">Queue a task</a> to invoke the <code>BlobCallback</code> <var>callback</var> with <var>result</var> as its argument. The <a data-link-type="dfn" href="webappapis.html#task-source" id="ref-for-task-source-15">task source</a> for this task is the <dfn data-dfn-type="dfn" data-lt="canvas blob serialization task source" data-noexport="" id="canvas-blob-serialization-task-source">canvas
    blob serialization task source<a class="self-link" href="semantics-scripting.html#canvas-blob-serialization-task-source"></a></dfn>.
      </li></ol>
     </div>
     <div class="impl">
      <h5 class="heading settled" data-level="4.12.4.1" id="color-spaces-and-color-correction"><span class="secno">4.12.4.1. </span><span class="content">Color spaces and color correction</span><a class="self-link" href="semantics-scripting.html#color-spaces-and-color-correction"></a></h5>
      <p>The <code>canvas</code> APIs must perform color correction at only two points: when rendering
  images with their own gamma correction and color space information onto a bitmap, to convert the
  image to the color space used by the bitmaps (e.g., using the 2D Context’s <code>drawImage()</code> method with an <code>HTMLImageElement</code> object), and when rendering the actual canvas bitmap to the output device.</p>
      <p class="note" role="note"> Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
  match colors obtained through the <code>getImageData()</code> method. </p>
      <p>The <code>toDataURL()</code> method must not include color space
  information in the resources they return. Where the output format allows it, the color of pixels
  in resources created by <code>toDataURL()</code> must match those
  returned by the <code>getImageData()</code> method.</p>
      <p>In user agents that support CSS, the color space used by a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-44">canvas</a></code> element must
  match the color space used for processing any colors for that element in CSS.</p>
      <p>The gamma correction and color space information of images must be handled in such a way that
  an image rendered directly using an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-140">img</a></code> element would use the same colors as one
  painted on a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-45">canvas</a></code> element that is then itself rendered. Furthermore, the rendering
  of images that have no color correction information (such as those returned by the <code>toDataURL()</code> method) must be rendered with no color
  correction.</p>
      <p class="note" role="note"> Thus, in the 2D context, calling the <code>drawImage()</code> method to render the output of the <code>toDataURL()</code> method to the canvas, given the appropriate
  dimensions, has no visible effect. </p>
     </div>
     <div class="impl">
      <h5 class="heading settled" data-level="4.12.4.2" id="serializing-bitmaps-to-a-file"><span class="secno">4.12.4.2. </span><span class="content">Serializing bitmaps to a file</span><a class="self-link" href="semantics-scripting.html#serializing-bitmaps-to-a-file"></a></h5>
      <p>When a user agent is to create <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="a serialization of the canvas element’s bitmap as a file|a serialization of the bitmap as a file" data-noexport="" id="a-serialization-of-the-canvas-elements-bitmap-as-a-file">a serialization of the bitmap as a file</dfn>, optionally
  with some given <var>arguments</var>, and optionally with a <var>native</var> flag set, it must
  create an image file in the format given by the first value of <var>arguments</var>, or, if there
  are no <var>arguments</var>, in the PNG format. <a data-link-type="biblio" href="references.html#biblio-png">[PNG]</a></p>
      <p>If the <var>native</var> flag is set, or if the bitmap has one pixel per coordinate space unit,
  then the image file must have the same pixel data (before compression, if applicable) as the
  bitmap, and if the file format used supports encoding resolution metadata, the resolution of that
  bitmap (device pixels per coordinate space units being interpreted as image pixels per CSS pixel)
  must be given as well.</p>
      <p>Otherwise, the image file’s pixel data must be the bitmap’s pixel data scaled to one image
  pixel per coordinate space unit, and if the file format used supports encoding resolution
  metadata, the resolution must be given as 96dpi (one image pixel per CSS pixel).</p>
      <p>If <var>arguments</var> is not empty, the first value must be interpreted as a <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-28">MIME type</a> giving the format to use. If the type has any parameters, it
  must be treated as not supported.</p>
      <p class="example" id="example-aa03e02c"><a class="self-link" href="semantics-scripting.html#example-aa03e02c"></a>For example, the value "<code>image/png</code>" would mean to generate a PNG
  image, the value "<code>image/jpeg</code>" would mean to generate a JPEG image, and the value
  "<code>image/svg+xml</code>" would mean to generate an SVG image (which would require that the
  user agent track how the bitmap was generated, an unlikely, though potentially awesome,
  feature).</p>
      <p>User agents must support PNG ("<code>image/png</code>"). User agents may support other types.
  If the user agent does not support the requested type, it must create the file using the PNG
  format. <a data-link-type="biblio" href="references.html#biblio-png">[PNG]</a></p>
      <p>User agents must <a data-link-type="dfn" href="infrastructure.html#converting-a-string-to-ascii-lowercase" id="ref-for-converting-a-string-to-ascii-lowercase-3">convert the provided type to ASCII lowercase</a> before establishing if they support that type.</p>
      <p>For image types that do not support an alpha channel, the serialized image must be the bitmap
  image composited onto a solid black background using the source-over operator.</p>
      <p>If the first argument in <var>arguments</var> gives a type corresponding to one of the
  types given in the first column of the following table, and the user agent supports that type,
  then the subsequent arguments, if any, must be treated as described in the second cell of that
  row.</p>
     </div>
     <table id="canvas-serialization-arguments">
      <caption>Arguments for serialization methods</caption>
      <thead>
       <tr>
        <th> Type 
        </th><th> Other arguments 
        </th><th> Reference 
      </th></tr></thead><tbody>
       <tr>
        <td> <code>image/jpeg</code> 
        </td><td> The second argument<span class="impl">, if it</span> is a number in the range 0.0 to 1.0
      inclusive<span class="impl">, must be</span> treated as the desired quality level. <span class="impl">If it is not a number or is outside that range, the user agent must use its
      default value, as if the argument had been omitted.</span> 
        </td><td> <a data-link-type="biblio" href="references.html#biblio-jpeg">[JPEG]</a> 
     </td></tr></tbody></table>
     <div class="impl">
      <p>For the purposes of these rules, an argument is considered to be a number if it is converted to
  an IDL double value by the rules for handling arguments of type <code>any</code> in the
  Web IDL specification. <a data-link-type="biblio" href="references.html#biblio-webidl">[WEBIDL]</a></p>
      <p>Other arguments must be ignored and must not cause the user agent to throw an exception. A
  future version of this specification will probably define other parameters to be passed to these
  methods to allow authors to more carefully control compression settings, image metadata, etc.</p>
     </div>
     <div class="impl">
      <h5 class="heading settled" data-level="4.12.4.3" id="security-with-canvas-elements"><span class="secno">4.12.4.3. </span><span class="content">Security with <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-46">canvas</a></code> elements</span><a class="self-link" href="semantics-scripting.html#security-with-canvas-elements"></a></h5>
      <p><em>This section is non-normative.</em></p>
      <p><strong>Information leakage</strong> can occur if scripts from one <a data-link-type="dfn" href="browsers.html#concept-cross-origin" id="ref-for-concept-cross-origin-26">origin</a> can
  access information (e.g., read pixels) from images from another origin (one that isn’t the same).</p>
      <p>To mitigate this, bitmaps used with <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-47">canvas</a></code> elements and <code>ImageBitmap</code> objects are defined to have a flag indicating whether they are <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-4">origin-clean</a>. All bitmaps start with their <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-5">origin-clean</a> set to true. The flag is set to
  false when cross-origin images or fonts are used.</p>
      <p>The <code>toDataURL()</code>, <code>toBlob()</code>, and <code>getImageData()</code> methods check the flag and will
  throw a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code> rather than leak cross-origin data.</p>
      <p>The value of the <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-6">origin-clean</a> flag is
  propagated from a source <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-48">canvas</a></code> element’s bitmap to a new <code>ImageBitmap</code> object by <code>createImageBitmap()</code>. Conversely, a
  destination <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-49">canvas</a></code> element’s bitmap will have its <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-7">origin-clean</a> flags set to false by <code>drawImage</code> if the source image is an <code>ImageBitmap</code> object whose bitmap has its <a data-link-type="dfn" href="semantics-scripting.html#canvas-origin-clean" id="ref-for-canvas-origin-clean-8">origin-clean</a> flag set to false.</p>
      <p>The flag can be reset in certain situations; for example, when a <code>CanvasRenderingContext2D</code> is bound to a new <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-50">canvas</a></code>, the bitmap is cleared
  and its flag reset.</p>
     </div>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="interactive-elements.html#interactive-elements"><span class="secno">4.11</span> <span class="content">Interactive elements</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements"><span class="secno">4.13</span> <span class="content">Common idioms without dedicated elements</span></a> →</p></body></html>
